* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Visually hidden but still readable by screen readers — used for
   aria-live announcements that have no visual presence of their own. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html,
body,
#root {
  width: 100%;
  min-height: 100vh;
  /* Layout containers below (KPI rows, tab strips, tables, etc.) own their
     own horizontal scroll via overflow-x: auto — the page body itself must
     never scroll horizontally, at any viewport width. */
  overflow-x: hidden;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--color-bg-gradient);
}

/* ── Global scrollbar ─────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}

*::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

*::-webkit-scrollbar-track {
  background-color: var(--color-scrollbar-track);
  border-radius: 6.25rem;
}

*::-webkit-scrollbar-thumb {
  border: 0.03125rem solid var(--color-scrollbar-thumb-border);
  border-radius: 6.25rem;
  background: var(--color-scrollbar-thumb);
}

*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}
/* Remove arrow buttons completely (all states) */
*::-webkit-scrollbar-button:single-button {
  display: none;
  width: 0;
  height: 0;
}

/* Also target directional buttons explicitly */
*::-webkit-scrollbar-button:vertical:start:decrement,
*::-webkit-scrollbar-button:vertical:end:increment,
*::-webkit-scrollbar-button:horizontal:start:decrement,
*::-webkit-scrollbar-button:horizontal:end:increment {
  display: none;
}

/* Optional: force no extra spacing */
*::-webkit-scrollbar-track-piece {
  margin: 0;
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--space-10);
  background-color: var(--color-navbar);
  box-shadow: none;
  z-index: 1000;
}

.navbar-toolbar {
  height: 100%;
  padding: 0 var(--space-lg) 0 var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-brand-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.navbar-rapidroi-icon {
  display: flex;
  align-items: center;
}

.navbar-rapidroi-icon svg {
  /* Logo viewBox is tight (37 tall). Height drives the on-screen size;
     width scales automatically (~8:1 aspect). */
  height: 1.15rem;
  width: auto;
}

.navbar-separator {
  color: var(--color-white);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-light);
  opacity: 0.5;
  line-height: var(--line-height-none);
}

.navbar-unilever-icon {
  display: flex;
  align-items: center;
}

.navbar-unilever-icon svg {
  height: var(--space-12-4);
  width: auto;
}

.navbar-dots-icon,
.navbar-logout-icon {
  display: block;
  width: var(--space-lg);
  height: var(--space-lg);
  flex-shrink: 0;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.navbar-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-px);
}

.navbar-last-updated {
  font-size: var(--font-size-sm);
  color: var(--color-white);
  opacity: 1;
  font-family: var(--font-family-base);
  white-space: nowrap;
}

.navbar-data-source {
  font-size: var(--font-size-xs);
  color: var(--color-white);
  opacity: 1;
  text-decoration: underline;
  font-family: var(--font-family-base);
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.navbar-data-source:hover {
  opacity: 1;
}

.navbar-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-white);
  opacity: 1;
  display: flex;
  align-items: center;
  padding: var(--space-0-8);
  border-radius: var(--radius-sm);
  transition: opacity var(--motion-duration-fast) ease;
}

.navbar-icon-btn:hover {
  opacity: 1;
}

.navbar-dots-wrap {
  position: relative;
  flex-shrink: 0;
}

.navbar-dots-dropdown {
  position: absolute;
  top: calc(100% + var(--space-sm));
  right: 0;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 var(--space-xs) var(--space-xl) var(--color-shadow-dropdown);
  min-width: var(--space-44);
  z-index: 2000;
  overflow: hidden;
  padding: var(--space-xs) 0;
}

.navbar-dots-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  font-family: var(--font-family-display);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--motion-duration-fast) ease;
}

.navbar-dots-item:hover {
  background: var(--color-bg-hover-light);
  color: var(--color-primary);
}

.navbar-dots-item-icon {
  width: var(--space-lg);
  height: var(--space-lg);
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.navbar-dots-item:hover .navbar-dots-item-icon {
  color: var(--color-primary);
}

.navbar-dots-empty {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
}

.navbar-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.navbar-avatar {
  width: var(--space-xxl);
  height: var(--space-xxl);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-display);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
  border: none;
  padding: 0;
  outline-offset: 2px;
}

.navbar-dropdown {
  position: absolute;
  top: calc(100% + var(--space-sm));
  right: 0;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 var(--space-xs) var(--space-xl) var(--color-shadow-dropdown);
  min-width: var(--space-52);
  z-index: 2000;
  overflow: hidden;
  padding: var(--space-xs) 0;
}

.navbar-dropdown-user {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
}

.navbar-dropdown-avatar {
  width: var(--space-xxl);
  height: var(--space-xxl);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-display);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.navbar-dropdown-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  font-family: var(--font-family-display);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.navbar-dropdown-divider {
  height: var(--space-px);
  background: var(--color-border);
  margin: var(--space-xs) 0;
}

.navbar-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  font-family: var(--font-family-display);
  text-align: left;
  transition: background var(--motion-duration-fast) ease;
}

.navbar-dropdown-item:hover {
  background: var(--color-bg-hover-light);
  color: var(--color-error);
}

.ds-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-backdrop-overlay);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-modal {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 var(--space-xs) var(--space-xl) var(--color-shadow-dropdown);
  width: var(--space-28);
  max-width: 90vw;
}

.ds-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--space-px) solid var(--color-border);
}

.ds-modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  font-family: var(--font-family-display);
}

.ds-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-body);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  transition: background var(--motion-duration-fast) ease;
}

.ds-modal-close svg {
  width: var(--space-lg);
  height: var(--space-lg);
  display: block;
}

.ds-modal-close:hover {
  background: var(--color-bg-hover-light);
}

.ds-modal-body {
  padding: var(--space-lg);
}

.ds-modal-body ul {
  margin: 0;
  padding-left: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ds-modal-body li {
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  font-family: var(--font-family-base);
}

/* ── Responsive ───────────────────────────────────────────
   The toolbar is a single non-wrapping flex row (brand group +
   meta/actions). Below ~768px there isn't always room for the full
   "Last Updated: <date>" string alongside "Data Source" and the other
   actions. Rather than hiding "Last Updated" outright (it's useful,
   user-facing information, not purely decorative), let it shrink and
   truncate with an ellipsis instead — it stays visible at every width,
   just shorter when space is tight. The full text is still available via
   the element's aria-label for assistive tech.
   min-width: 0 is what actually lets this shrink: flex items default to
   min-width: auto (their content size), which would otherwise stop each
   container in the chain — .navbar-right, then .navbar-meta, then
   .navbar-last-updated itself — from ever shrinking below "Last Updated:
   <date>"'s full width, no matter how little room is left. It has to be
   set at every level of that chain, not just the innermost one: .navbar-
   right is .navbar-toolbar's own flex item, so if *it* doesn't shrink,
   .navbar-meta inside it never even gets asked to. The sibling icons/
   avatar (flex-shrink: 0 already) keep their size, so the flex algorithm
   gives .navbar-meta exactly whatever room remains, guaranteeing no
   overflow at any width. */
@media (max-width: 768px) {
  .navbar-toolbar {
    padding: 0 var(--space-md) 0 var(--space-sm);
  }

  .navbar-right {
    min-width: 0;
  }

  .navbar-meta {
    min-width: 0;
  }

  .navbar-last-updated {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 480px) {
  .navbar-data-source {
    display: none;
  }

  .navbar-right {
    gap: var(--space-sm);
  }
}
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  height: var(--space-xxl); /* 2rem */
  padding: 0 var(--space-lg);
  letter-spacing: var(--letter-spacing-wider);
  cursor: pointer;
  transition: background-color var(--motion-duration-normal) ease;
}

.primary-btn--full {
  width: 100%;
}

.primary-btn:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
}

.primary-btn:disabled {
  background-color: var(--color-btn-disabled-bg);
  color: var(--color-btn-disabled-text);
  cursor: not-allowed;
}
.input-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.input-field-inner {
  position: relative;
  display: flex;
  align-items: center;
}

.input-field {
  width: 100%;
  height: var(--space-12); /* 3rem */
  padding: var(--space-lg) var(--space-md) var(--space-xs);
  border: var(--space-px) solid var(--color-input-border);
  border-radius: var(--radius-input);
  background-color: var(--color-input-bg);
  font-size: var(--font-size-base);
  color: var(--color-text-heading);
  outline: none;
  transition: border-color var(--motion-duration-normal) ease;
}

/* floating label */
.input-label {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-base);
  color: var(--color-input-label);
  pointer-events: none;
  transition:
    top var(--motion-duration-fast) ease,
    font-size var(--motion-duration-fast) ease,
    color var(--motion-duration-fast) ease;
}

.input-field:focus ~ .input-label,
.input-field.has-value ~ .input-label {
  top: calc(var(--space-px) * -8);
  transform: none;
  font-size: var(--font-size-2xs);
  color: var(--color-black);
  background: var(--color-input-bg);
  padding: 0 var(--space-xs);
  line-height: var(--line-height-none);
  z-index: 1;
  margin-left: calc(var(--space-xs) * -1);
}

.input-field:focus {
  border-color: var(--color-input-border-focus);
}

/* error state */
.input-wrapper--error .input-field {
  border-color: var(--color-error);
}
.input-wrapper--error .input-label {
  color: var(--color-error);
}

.input-helper {
  font-size: var(--font-size-sm);
  color: var(--color-error);
  padding-left: var(--space-md);
}

/* password toggle */
.visibility-btn {
  position: absolute;
  right: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  color: var(--color-visibility-icon);
  display: flex;
  align-items: center;
}

.visibility-btn svg {
  width: var(--space-lg); /* 1.5rem — close to original 1.1rem icon size */
  height: var(--space-lg);
}

/* autofill override — also fires animationstart so JS can detect the fill */
@keyframes onAutofillStart { from { } }

.input-field:-webkit-autofill,
.input-field:-webkit-autofill:hover,
.input-field:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text-heading);
  box-shadow: 0 0 0 62.5rem var(--color-input-bg) inset;
  transition: background-color 5000s ease-in-out 0s;
  animation-name: onAutofillStart;
  animation-duration: 1ms;
}

/* float the label when the browser has autofilled the field */
.input-field:-webkit-autofill ~ .input-label {
  top: calc(var(--space-px) * -6);
  transform: none;
  font-size: var(--font-size-2xs);
  color: var(--color-black);
  background: var(--color-input-bg);
  padding: 0 var(--space-xs);
  line-height: var(--line-height-none);
  z-index: 1;
  margin-left: calc(var(--space-xs) * -1);
}
.speed-lines {
  display: block;
  overflow: visible; /* streaks + smoke fly past the viewBox edges */
}

/* Colours (var() isn't valid in SVG presentation attributes). */
.sl-grad-start {
  stop-color: var(--color-logo-bar-start);
}
.sl-grad-end {
  stop-color: var(--color-logo-bar-end);
}
.sl-track rect {
  fill: var(--color-logo-bar-start);
  opacity: 0.14;
}
.sl-smoke {
  fill: var(--color-loader-smoke);
}

/* ── Speed streaks: grow from the left, hold, whoosh off right + fade ──── */
.sl-bar {
  transform-box: fill-box;
  transform-origin: left center;
  filter: drop-shadow(0 0 1.5px var(--color-logo-bar-start));
  will-change: transform, opacity;
  animation: sl-streak 0.9s cubic-bezier(0.4, 0, 0.15, 1) infinite;
}
.sl-bar--1 {
  animation-delay: 0s;
}
.sl-bar--2 {
  animation-delay: 0.13s;
}
.sl-bar--3 {
  animation-delay: 0.26s;
}

@keyframes sl-streak {
  0% {
    transform: translateX(0) scaleX(0.05);
    opacity: 0;
  }
  22% {
    transform: translateX(0) scaleX(1);
    opacity: 1;
  }
  48% {
    transform: translateX(0) scaleX(1);
    opacity: 1;
  }
  100% {
    transform: translateX(18px) scaleX(0.12);
    opacity: 0;
  }
}

/* ── Exhaust smoke: slower, out of sync, so it lingers. ────────────────── */
.sl-smoke {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity;
  animation: sl-smoke 1.7s ease-out infinite;
}
.sl-smoke--1 {
  animation-delay: 0.15s;
}
.sl-smoke--2 {
  animation-delay: 0.7s;
}
.sl-smoke--3 {
  animation-delay: 1.15s;
}

@keyframes sl-smoke {
  0% {
    transform: translate(0, 0) scale(0.4);
    opacity: 0;
  }
  25% {
    opacity: 0.4;
  }
  100% {
    transform: translate(-9px, -6px) scale(1.7);
    opacity: 0;
  }
}

/* Reduced-motion: hold the mark fully drawn, drop the smoke. */
@media (prefers-reduced-motion: reduce) {
  .sl-bar {
    animation: none;
    transform: none;
    opacity: 1;
  }
  .sl-smoke-group {
    display: none;
  }
}
.auth-loader-container {
  position: fixed;
  inset: 0;
  /* Match the login screen (tokens: --color-hero-gradient / --color-bg-cream). */
  background: var(--color-hero-gradient), var(--color-bg-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Wordmark + animated bars, laid out as the RAPID ROI lockup. */
.auth-loader-lockup {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.auth-loader-word {
  font-family: "Manrope", var(--font-family-base);
  font-size: 2.5rem; /* ~40px */
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--color-text-heading);
  white-space: nowrap;
}

.auth-loader-mark {
  width: 5rem; /* bars sized to sit beside the ~40px wordmark */
  height: auto;
}

@media (max-width: 480px) {
  .auth-loader-word {
    font-size: 1.9rem;
  }
  .auth-loader-mark {
    width: 4rem;
  }
}
.toast-container {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: 10000;
  pointer-events: none;
}

.toast {
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-tooltip);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-width: 320px;
  max-width: 500px;
  pointer-events: all;
  animation: toast-slide-in var(--motion-duration-normal) ease-out;
}

.toast--success {
  background: var(--color-success, #2E7D32);
}

.toast--error {
  background: var(--color-error-msg-bg, #9C2121);
}

.toast--warning {
  background: var(--color-warning, #ED6C02);
}

.toast--info {
  background: var(--color-info, #1565C0);
}

@keyframes toast-slide-in {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-xl);
  height: var(--space-xl);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  flex-shrink: 0;
  color: white;
}

.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-message {
  font-size: var(--font-size-sm);
  color: white;
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-medium);
  display: block;
}

.toast-close {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
  width: var(--space-5);
  height: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
  flex-shrink: 0;
  opacity: 0.8;
}

.toast-close:hover {
  background: rgba(255, 255, 255, 0.15);
  opacity: 1;
}
.login-page {
  min-height: 100vh;
  /* Figma 1284-39670: a subtle teal→white→purple→pink gradient over the cream
     base (tokens: --color-hero-gradient / --color-bg-cream). */
  background: var(--color-hero-gradient), var(--color-bg-cream);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* session-expired notice bar — sits below the fixed navbar, above the
   decorative background images, with a compact centered message + button. */
.login-auth-expired-banner {
  position: relative;
  z-index: 3;
  margin-top: var(--space-10);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-warning-bg);
  border-bottom: var(--space-px) solid var(--color-warning-border);
}

.login-auth-expired-banner p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  font-family: var(--font-family-base);
}

/* background SVG overlay */
.login-bg-svg {
  position: absolute;
  /* inset:0 (not top + height:100%) so it fills reliably in Safari/WebKit,
     which resolves percentage heights against a min-height container
     differently than Chrome. */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0.45;
  z-index: 0;
}

/* UlLS decorative image — left side */
.login-ulls-img {
  position: absolute;
  left: 0;
  top: 54%;
  transform: translateY(-50%);
  height: var(--space-70);
  max-width: var(--space-52);
  object-fit: contain;
  pointer-events: none;
  opacity: 0.5;
  z-index: 1;
}

/* main content area — vertically centered below navbar */
.login-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* card — matches expected width */
.login-card {
  width: 100%;
  max-width: var(--space-25);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

/* "Welcome to" */
.welcome-text {
  font-size: var(--font-size-5xl);
  color: var(--color-text-heading);
  font-weight: var(--font-weight-semilight);
  font-family: var(--font-family-base);
  text-align: center;
  margin: 0 0 var(--space-0-4);
}

/* "RapidROI" */
.rapid-logo {
  width: 100%;
  max-width: var(--space-25); /* fill the 400px login card */
  height: auto;
  display: block;
  margin: var(--space-sm) auto;
  opacity: 1;
}

/* "Unified hub for spend optimization" */
.brand-subtitle {
  font-size: var(--font-size-3xl);
  color: var(--color-text-subtitle);
  text-align: center;
  margin: var(--space-xs) 0 var(--space-15);
  font-family: var(--font-family-base);
}

/* SSO button wrapper */
.sso-wrapper {
  width: 100%;
  margin-bottom: var(--space-5);
}

/* Or divider — wider than card to match expected */
.or-divider {
  display: flex;
  align-items: center;
  width: 115%;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.divider-line {
  flex: 1;
  height: var(--space-px);
  background-color: var(--color-divider);
  display: block;
}

.or-text {
  color: var(--color-divider-text);
  font-size: var(--font-size-base);
  white-space: nowrap;
  line-height: var(--line-height-none);
}

/* form fields */
.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3-5);
}

/* transparent inputs on login page */
.login-form .input-field {
  background-color: transparent;
  border-color: var(--color-primary);
}

/* label background on login must blend with gradient — no color change */
.login-form .input-field:focus ~ .input-label,
.login-form .input-field.has-value ~ .input-label,
.login-form .input-field:-webkit-autofill ~ .input-label {
  background: var(--color-login-input-bg);
  color: var(--color-input-label);
}

.login-form .input-field:-webkit-autofill,
.login-form .input-field:-webkit-autofill:hover,
.login-form .input-field:-webkit-autofill:focus {
  box-shadow: 0 0 0 62.5rem transparent inset;
  -webkit-text-fill-color: var(--color-text-heading);
}

/* forgot password */
.forgot-password {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-1-5);
}

.forgot-link {
  font-size: var(--font-size-sm);
  color: var(--color-text-link);
  cursor: pointer;
  text-decoration: none;
}

.forgot-link:hover {
  opacity: 0.75;
}

.error-text {
  font-size: var(--font-size-sm);
  color: var(--color-error);
  text-align: center;
  margin: calc(var(--space-0-4) * -1) 0 0;
}

/* ── Forgot Password button ─────────────────────────── */
.forgot-password .forgot-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ── Reset Password Modal ────────────────────────────── */
.fp-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.fp-modal {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 var(--space-sm) var(--space-xxl) rgba(0, 0, 0, 0.2);
  width: min(var(--space-26), 92vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: var(--space-px) solid var(--color-border);
}

.fp-modal-title {
  font-size: var(--font-size-lg);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  margin: 0;
}

.fp-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  line-height: 1;
}

.fp-modal-close:hover {
  color: var(--color-text-body);
}

.fp-modal-body {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.fp-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-xl);
  border-top: var(--space-px) solid var(--color-border);
}

.fp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-xs) var(--space-xl);
  cursor: pointer;
  border: var(--space-px) solid transparent;
  transition: opacity var(--motion-duration-fast) ease;
}

.fp-btn--outline {
  background: var(--color-white);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.fp-btn--outline:hover {
  background: var(--color-bg-card-alt);
}

.fp-btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.fp-btn--primary:hover {
  opacity: 0.88;
}

.fp-btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.no-access-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f0f2f5;
}

.no-access-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.no-access-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 3rem 4rem;
  max-width: 600px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.no-access-icon {
  width: 56px;
  height: 56px;
}

.no-access-icon svg {
  width: 100%;
  height: 100%;
}

.no-access-message {
  color: #1a237e;
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
  margin: 0;
}

.no-access-link {
  color: #1a237e;
  font-weight: 600;
  text-decoration: none;
}

.no-access-link:hover {
  text-decoration: underline;
}

.no-access-btn {
  margin-top: 0.25rem;
  padding: 0.55rem 1.5rem;
  background: #1a237e;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.no-access-btn:hover {
  background: #283593;
}
.fb-wrapper {
  position: sticky;
  top: var(--space-10);
  /* 2.75rem — below fixed navbar */
  z-index: 100;
  background: var(--color-bg-card);
  border-bottom: var(--space-px) solid var(--color-border);
}

/* ── Strip ──────────────────────────────────────────────── */
.fb-strip {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-1-5) var(--space-7);
  min-height: var(--space-10);
}

/* ── Filters button ─────────────────────────────────────── */
.fb-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-xs) var(--space-md);
  border: var(--space-px) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
  color: var(--color-black);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-family-display);
  transition:
    background var(--motion-duration-fast) ease,
    color var(--motion-duration-fast) ease;
}

.fb-btn svg path {
  fill: var(--color-primary);
  fill-opacity: 1;
}

.fb-filter-icon {
  width: var(--space-3-5);
  height: var(--space-3-5);
  object-fit: contain;
}

/* ── No-filters error state ──────────────────────────────── */
.fb-no-filters {
  padding: var(--space-4);
  color: var(--color-error);
}

/* ── Inline filter-load-error message in strip ───────────── */
.fb-unavailable-msg {
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-text-muted);
}

/* ── Calendar popup (position driven by JS via CSS custom props) */
.fb-monthrange-popup {
  position: fixed;
  top: var(--fb-cal-top, 0px);
  left: var(--fb-cal-left, 0px);
  z-index: 9999;
}

.fb-btn--active,
.fb-btn:hover {
  background: var(--color-grey);
  color: var(--color-black);
}

.fb-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.fb-btn--active svg path,
.fb-btn:hover svg path {
  fill: var(--color-white);
}

/* ── Chips ──────────────────────────────────────────────── */
.fb-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.fb-chips--loading {
  opacity: 0.7;
  pointer-events: none;
}

.fb-chip {
  position: relative;
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  font-weight: var(--font-weight-regular);
  font-family: var(--font-family-base);
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-xs);
  transition: background var(--motion-duration-fast) ease;
}

.fb-chip:hover {
  background: var(--color-bg-hover-light);
}

.fb-chip-extra {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.fb-chip-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-1-5));
  left: 0;
  z-index: 300;
  background: #2d1b6b;
  color: #fff;
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  min-width: var(--space-40);
  flex-direction: column;
  gap: var(--space-xs);
  white-space: nowrap;
  box-shadow: 0 var(--space-xs) var(--space-md) rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.fb-chip:hover .fb-chip-tooltip {
  display: flex;
}

.fb-chip-tooltip-item {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: #fff;
}

.fb-chip-value {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  display: inline-block;
  max-width: var(--space-40);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.fb-chip-value--none {
  color: var(--color-text-muted, #94a3b8);
  font-weight: var(--font-weight-regular);
  font-style: italic;
}

.fb-chip-sep {
  font-size: var(--font-size-sm);
  color: var(--color-filter-pipe);
  padding: 0 var(--space-xs);
  user-select: none;
}

/* ── Backdrop ───────────────────────────────────────────── */
.fb-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
}

/* ── Panel ──────────────────────────────────────────────── */
.fb-panel {
  --fb-panel-left-w: var(--space-31); /* 18rem — left column width */
  position: absolute;
  top: 100%;
  left: var(--space-5);
  z-index: 200;
  background: var(--color-bg-card);
  box-shadow: 0 var(--space-sm) var(--space-xxl) var(--color-shadow-panel);
  width: auto;
  display: grid;
  grid-template-columns: var(--fb-panel-left-w) var(--space-22);
  grid-template-rows: 1fr auto;
  height: var(--space-22);
  overflow: hidden;
  border-top: var(--space-px) solid var(--color-border);
}

.fb-panel--collapsed {
  width: var(--fb-panel-left-w);
  grid-template-columns: 1fr;
}

/* ── Left column ────────────────────────────────────────── */
.fb-panel-left {
  grid-row: 1;
  grid-column: 1;
  border-right: var(--space-px) solid var(--color-border);
  overflow: hidden;
  min-height: 0;
  height: 100%;
}

.fb-panel-left-content {
  padding: var(--space-xs) var(--space-md);
}

.fb-group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3-5) var(--space-5);
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--color-primary);
  text-align: left;
  width: 100%;
  font-family: var(--font-family-display);
  border-radius: var(--radius-sm);
  margin-block: var(--space-xs);
  transition: background var(--motion-duration-fast) ease;
}

.fb-group-item:hover {
  background: var(--color-bg-hover-light);
  border-radius: var(--radius-sm);
  margin-block: var(--space-xs);
  font-weight: var(--font-weight-semibold);
}

.fb-group-item--active {
  background: var(--color-bg-hover-light);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-semibold);
  margin-block: var(--space-xs);
}

.fb-group-divider {
  height: var(--space-px);
  background: var(--color-filter-border);
  margin: 0;
}

/* ── Right column ───────────────────────────────────────── */
.fb-panel-right {
  grid-row: 1;
  grid-column: 2;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}

.fb-panel-right-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-lg) var(--space-5);
}

/* ── Search ─────────────────────────────────────────────── */
.fb-search-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border: var(--space-px) solid var(--color-input-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1-5) var(--space-md);
  background: var(--color-bg-card);
  transition: border-color var(--motion-duration-fast) ease;
  max-width: var(--space-60);
}

.fb-search-wrap:focus-within {
  border-color: var(--color-primary);
}

.fb-search {
  border: none;
  outline: none;
  font-size: var(--font-size-base);
  color: var(--color-primary);
  width: 100%;
  background: transparent;
  font-family: var(--font-family-base);
}

/* ── Options list ───────────────────────────────────────── */
.fb-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.fb-options-divider {
  height: var(--space-px);
  background: var(--color-border);
  margin: var(--space-px) 0;
}

.fb-option {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  font-size: var(--font-size-base);
  color: var(--color-primary);
  cursor: pointer;
  font-family: var(--font-family-display);
}

.fb-option:hover,
.fb-option:has(input:checked) {
  font-weight: var(--font-weight-semibold);
}

.fb-option input[type="radio"],
.fb-option input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: var(--space-md);
  height: var(--space-md);
  cursor: pointer;
  flex-shrink: 0;
}

.fb-no-results {
  font-size: var(--font-size-sm);
  color: var(--color-text-placeholder);
  margin: 0;
}

.fb-option-highlight {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--space-0-5);
}

/* ── Date range ─────────────────────────────────────────── */
.fb-daterange {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.fb-date-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.fb-date-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
}

.fb-date-input {
  border: var(--space-px) solid var(--color-input-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1-5) var(--space-md);
  font-size: var(--font-size-base);
  color: var(--color-primary);
  background: var(--color-bg-card);
  outline: none;
  cursor: pointer;
  width: 100%;
  font-family: var(--font-family-base);
  transition: border-color var(--motion-duration-fast) ease;
}

.fb-date-input:focus {
  border-color: var(--color-border-strong);
}

.fb-date-summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  padding-top: var(--space-sm);
  border-top: var(--space-px) solid var(--color-border);
}

/* ── Month range trigger & popup ────────────────────────── */
.fb-monthrange-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.fb-monthrange-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-1-5) var(--space-lg);
  border: var(--space-px) solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
  color: var(--color-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  font-family: var(--font-family-display);
  transition: background var(--motion-duration-fast) ease;
}

.fb-monthrange-trigger:hover {
  background: var(--color-bg-hover-light);
}

.fb-monthrange-popup {
  position: fixed;
  z-index: 9999;
  transform: translateX(-50%);
}

/* ── Footer ─────────────────────────────────────────────── */
.fb-panel-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-3-5);
  position: relative;
}

.fb-panel-footer::before,
.fb-panel-footer::after {
  content: "";
  position: absolute;
  top: 0;
  height: var(--space-px);
  background: var(--color-filter-border);
}

/* line under the left column */
.fb-panel-footer::before {
  left: var(--space-md);
  width: calc(var(--fb-panel-left-w) - (var(--space-md) * 2));
}

/* line under the right column */
.fb-panel-footer::after {
  left: calc(var(--fb-panel-left-w) + var(--space-md));
  right: var(--space-md);
}

.fb-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  background: none;
  border: var(--space-px) solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  padding: var(--space-1-5) var(--space-md);
  font-family: var(--font-family-display);
  transition: border-color var(--motion-duration-fast) ease;
}

.fb-reset-btn:hover:not(:disabled) {
  border-color: var(--color-border);
}

.fb-reset-btn:disabled {
  color: var(--color-text-placeholder);
  cursor: not-allowed;
  opacity: 0.6;
}

.fb-cancel-btn {
  background: none;
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1-5) var(--space-5);
  font-size: var(--font-size-base);
  color: var(--color-primary);
  cursor: pointer;
  font-family: var(--font-family-display);
  transition: border-color var(--motion-duration-fast) ease;
}

.fb-cancel-btn:hover:not(:disabled) {
  border-color: var(--color-border-strong);
}

.fb-cancel-btn:disabled {
  color: var(--color-text-placeholder);
  cursor: not-allowed;
  opacity: 0.6;
}

.fb-apply-btn {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-1-5) var(--space-xl);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  font-family: var(--font-family-display);
  transition: background var(--motion-duration-fast) ease;
}

.fb-apply-btn:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.fb-apply-btn:disabled {
  background: var(--color-border);
  color: var(--color-text-placeholder);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ── Options loading overlay ────────────────────────────── */
.fb-options-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-md) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.fb-options-spinner {
  display: inline-block;
  width: var(--space-3-5);
  height: var(--space-3-5);
  border: var(--space-0-5) solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: fb-spin var(--motion-duration-spin-fast) linear infinite;
  flex-shrink: 0;
}

/* ── Sidebar group spinner (dependent filters updating) ─── */
.fb-group-spinner {
  display: inline-block;
  width: var(--space-md);
  height: var(--space-md);
  border: var(--space-0-5) solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: fb-spin var(--motion-duration-spin-fast) linear infinite;
  flex-shrink: 0;
}

.fb-group-item--updating {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Apply button spinner ───────────────────────────────── */
.fb-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
}

.fb-apply-spinner {
  display: inline-block;
  width: var(--space-md);
  height: var(--space-md);
  border: var(--space-0-5) solid var(--color-overlay-white-faint);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: fb-spin var(--motion-duration-spin-fast) linear infinite;
  flex-shrink: 0;
}

@keyframes fb-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Options fade while updating ───────────────────────── */
.fb-panel-right .fb-options,
.fb-panel-right .fb-search-wrap,
.fb-panel-right .fb-daterange {
  transition: opacity var(--motion-duration-fade) ease;
}

.fb-panel-right:has(.fb-options-loading) .fb-options,
.fb-panel-right:has(.fb-options-loading) .fb-search-wrap {
  opacity: 0.35;
  pointer-events: none;
}

/* ── Error chip value ────────────────────────────────────── */
.fb-chip-value--error {
  color: var(--color-error);
  font-weight: var(--font-weight-semibold);
}

/* ── Group item icons wrapper ────────────────────────────── */
.fb-group-item-icons {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  flex-shrink: 0;
}

/* ── Error icon in left sidebar ──────────────────────────── */
.fb-group-error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-md);
  height: var(--space-md);
  border-radius: 50%;
  border: var(--space-px) solid var(--color-error);
  color: var(--color-error);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  flex-shrink: 0;
  cursor: default;
}

/* ── Error banner in right panel ─────────────────────────── */
.fb-error-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: var(--space-px) solid var(--color-error);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
  color: var(--color-error);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.fb-error-banner-icon {
  flex-shrink: 0;
  font-size: 10px;
  margin-top: var(--space-0-5);
}

/* ── Imported icon sizes ─────────────────────────────────── */
.fb-chevron-right-icon {
  display: block;
  width: var(--space-lg);
  height: var(--space-lg);
  flex-shrink: 0;
}

.fb-calendar-icon {
  display: block;
  width: var(--space-3-5);
  height: var(--space-3-5);
  flex-shrink: 0;
}

/* ── Responsive ───────────────────────────────────────────
   The filter panel's two columns (group list + options) use fixed rem
   widths sized for desktop and together exceed a mobile viewport. Stack
   them into a single scrollable column instead, capped to the viewport
   so the panel never pushes the page into horizontal scroll. */
@media (max-width: 768px) {
  .fb-panel {
    grid-template-columns: 1fr;
    /* minmax(0, 1fr) — not a fixed max-height per row — is required here:
       CSS Grid sizes `auto` tracks (the footer) from their own content
       FIRST, then splits whatever's left between `1fr` tracks. A previous
       version instead gave .fb-panel-left/.fb-panel-right an independent
       `max-height: 40vh` each (80vh combined) with `grid-template-rows:
       auto auto auto` — exactly matching this panel's own 80vh cap, so
       once either list had enough options to actually reach 40vh, there
       was zero room left for the footer row, which .fb-panel's own
       `overflow: hidden` (below) then silently clipped — the Apply/Cancel
       buttons weren't just hard to reach, they were never rendered
       on-screen at all. */
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto;
    width: min(var(--fb-panel-left-w), 92vw);
    max-width: 92vw;
    height: auto;
    max-height: 80vh;
  }

  .fb-panel--collapsed {
    width: min(var(--fb-panel-left-w), 92vw);
  }

  .fb-panel-left {
    grid-row: 1;
    grid-column: 1;
    border-right: none;
    border-bottom: var(--space-px) solid var(--color-border);
    /* min-height: 0 overrides the grid-item default of min-height: auto
       (which otherwise refuses to shrink below content size, defeating
       the minmax(0, 1fr) row above) so this pane actually shrinks to its
       allotted share of space and scrolls internally instead. */
    min-height: 0;
    overflow-y: auto;
  }

  .fb-panel-right {
    grid-row: 2;
    grid-column: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .fb-panel-footer {
    grid-row: 3;
    grid-column: 1;
  }

  .fb-panel-footer::before,
  .fb-panel-footer::after {
    display: none;
  }
}

.fb-reset-icon {
  display: inline-block;
  width: var(--space-md);
  height: var(--space-md);
  vertical-align: middle;
}
.mrcp {
  --mrcp-width: var(--space-34);        /* 20rem = 320px */
  --mrcp-month-size: var(--space-15);   /* 3.75rem = 60px — month circle button */
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-5) var(--space-sm);
  width: var(--mrcp-width);
  box-shadow: 0 var(--space-xs) var(--space-5) var(--color-shadow-popover);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ── Year navigation ──────────────────────────────────── */
.mrcp__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.mrcp__nav {
  width: var(--space-7); /* 28px */
  height: var(--space-7);
  border: none;
  background: none;
  color: var(--color-primary);
  font-size: var(--font-size-3xl); /* closest token: 1.2rem ≈ nav arrow size */
  line-height: var(--line-height-none);
  cursor: pointer;
  border-radius: var(--radius-input); /* 6px */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--motion-duration-fast);
}

.mrcp__nav:hover {
  background: var(--color-bg-hover-light);
}

.mrcp__year {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  border: var(--space-px) solid var(--color-input-border);
  border-radius: var(--radius-input);
  padding: var(--space-xs) var(--space-5);
  min-width: var(--space-20);
  width: var(--space-20);
  text-align: center;
  font-family: var(--font-family-display);
  background: var(--color-bg-card);
  outline: none;
  cursor: text;
}

/* hide browser number spinners */
.mrcp__year::-webkit-inner-spin-button,
.mrcp__year::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.mrcp__year[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.mrcp__year:focus {
  border-color: var(--color-primary);
}

/* ── Month grid ───────────────────────────────────────── */
.mrcp__month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  justify-items: center;
}

.mrcp__month {
  width: var(--mrcp-month-size);
  height: var(--mrcp-month-size);
  border-radius: var(--radius-full); /* 50% circle */
  border: none;
  background: var(--color-white); /* #e8eaf6 — lavender default */
  color: var(--color-primary);
  font-size: var(--font-size-base); /* ~13px */
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition:
    background var(--motion-duration-fast),
    color var(--motion-duration-fast);
  font-family: var(--font-family-display);
}

.mrcp__month:hover:not(:disabled) {
  background: var(--color-primary); /* #c5cae9 */
  color: var(--color-white);
}

.mrcp__month--selected {
  background: var(--color-primary);
  color: var(--color-white);
}

.mrcp__month--between {
  background: var(--color-circleblue); /* #c5cae9 */
  color: var(--color-primary);
}

.mrcp__month--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Footer ───────────────────────────────────────────── */
.mrcp__footer {
  display: flex;
  justify-content: flex-end;
  border-top: var(--space-px) solid var(--color-border);
  padding-top: var(--space-sm);
}

.mrcp__done {
  background: none;
  border: var(--space-px) solid var(--color-primary);
  border-radius: var(--radius-input);
  padding: var(--space-1-5) var(--space-5); /* 6px 20px */
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  cursor: pointer;
  font-family: var(--font-family-display);
  transition: background var(--motion-duration-fast);
}

.mrcp__done:hover:not(:disabled) {
  background: var(--color-bg-hover-light);
}

.mrcp__done:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--color-border);
  color: var(--color-text-placeholder);
}
.csb-root {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* ── Inner scrollable content — native bar hidden ────────── */
.csb-content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.csb-content::-webkit-scrollbar {
  display: none;
}

/* ── Vertical + capped (maxHeight set) — DataTable use case ─ */
/* Only applied when maxHeight prop is provided; does not affect  */
/* the page-level <CustomScrollbar height="100vh"> usage.        */
.csb-root--capped {
  height: auto; /* grow to content; inline max-height caps it */
}

.csb-root--capped .csb-content {
  height: auto;
  /* max-height is set via inline style in TSX — CSS inheritance is unreliable */
  overflow-x: hidden;
  overflow-y: auto;
}

/* ── Vertical track ──────────────────────────────────────── */
.csb-track--v {
  position: absolute;
  top: var(--space-xs);
  bottom: var(--space-xs);
  right: var(--space-0-8);
  width: var(--space-1-5);
  cursor: pointer;
  z-index: 10; /* above sticky thead (z-index: 2) */
}

/* ── Horizontal track ────────────────────────────────────── */
.csb-track--h {
  position: absolute;
  left: var(--space-xs);
  right: var(--space-xs);
  bottom: var(--space-0-8);
  height: var(--space-1-5);
  cursor: pointer;
}

/* Track stays mounted (so trackRef is measurable on first layout) but is
   visually hidden + non-interactive when content doesn't overflow. */
.csb-track--hidden {
  opacity: 0;
  pointer-events: none;
}

/* ── Horizontal root variant ─────────────────────────────── */
.csb-root--h {
  overflow: hidden; /* allow thumb to sit below content */
}

.csb-root--h .csb-content {
  overflow-x: auto;
  overflow-y: hidden;
  height: auto;
  max-height: none;
}

/* ── Thumb — pill: white fill + primary border ───────────── */
.csb-thumb {
  position: absolute;
  background: var(--color-white);
  border: var(--space-px) solid var(--color-primary);
  border-radius: var(--radius-md);
  cursor: grab;
  transition: background var(--motion-duration-fast) ease;
  z-index: 100;
}

.csb-thumb:hover,
.csb-thumb:active {
  background: var(--color-scrollbar-thumb-hover);
  cursor: grabbing;
}
@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-block {
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--color-lightgrey, #e5e7eb) 25%,
    #f3f4f6 50%,
    var(--color-lightgrey, #e5e7eb) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm, 0.25rem);
  flex-shrink: 0;
}

/* ── Filter strip variant ───────────────────────────────── */
.skeleton-filter-strip {
  display: flex;
  align-items: center;
  gap: 0;
}

.skeleton-chip-item {
  display: flex;
  align-items: center;
  padding: var(--space-xs);
}

.skeleton-chip-sep {
  font-size: var(--font-size-sm);
  color: var(--color-divider);
  padding: 0 var(--space-xs);
  user-select: none;
}
/* ── Full-page error container ───────────────────────────── */
.page-error-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 85vh;
  width: 100%;
  background: var(--color-lightgrey);
}

/* ── Inline / widget-level variant ──────────────────────── */
.page-error-container--inline {
  min-height: 240px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-lightgrey);
  border-radius: var(--radius-sm);
}

/* ── Variant that keeps the widget's title/description visible ─
   The grey error background applies only to the chart area below
   the header, not the title/description, which sit on the card. ── */
.page-error-container--inline.page-error-container--with-header {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: transparent;
  border-radius: 0;
}

.page-error-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--color-lightgrey);
  border-radius: var(--radius-sm);
}

.page-error-widget-header {
  padding: 0;
}

.page-error-widget-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: 0;
}

.page-error-widget-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: var(--space-px) 0 0;
  font-family: var(--font-family-base);
}

.page-error-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  max-width: var(--space-105);
  text-align: center;
  padding: var(--space-xxl) var(--space-xl);
}

.page-error-icon {
  margin-bottom: var(--space-0-4);
}

/* SVG color inheritance via currentColor */
.page-error-svg--error {
  color: var(--color-error);
}

.page-error-svg--primary {
  color: var(--color-primary);
}

/* ── Title ───────────────────────────────────────────────── */
.page-error-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-display);
  margin: 0;
  color: var(--color-primary);
}

.page-error-title--red {
  color: var(--color-error);
  letter-spacing: var(--letter-spacing-wider);
}

/* ── Message ─────────────────────────────────────────────── */
.page-error-message {
  font-size: var(--font-size-lg);
  font-family: var(--font-family-base);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--line-height-loose);
}

/* ── Button ──────────────────────────────────────────────── */
.page-error-button {
  margin-top: var(--space-sm);
  padding: var(--space-2-5) var(--space-xxl);
  background-color: var(--color-error);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-input);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-display);
  cursor: pointer;
  transition: background-color var(--motion-duration-normal)
    var(--motion-easing-standard);
}

.page-error-button:hover {
  background-color: var(--color-danger);
}

.page-error-button:active {
  transform: scale(0.98);
}

/* ── Filter-error variant — same as full-page, no box/border ─ */
.page-error-container--filter {
  min-height: unset;
  height: 100%;
  background: var(--color-lightgrey);
}

/* ── Chart-level no-data variant ─────────────────────────── */
.page-error-container--chart {
  min-height: unset;
  flex: 1;
  background: var(--color-lightgrey);
  border-radius: var(--radius-sm);
}

.page-error-container--chart .page-error-content {
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-lg);
}

.page-error-container--chart .page-error-icon {
  margin-bottom: var(--space-0-4);
}

.page-error-container--chart .page-error-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-error);
  letter-spacing: var(--letter-spacing-wider);
}

.page-error-container--chart .page-error-message {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  text-align: center;
  line-height: var(--line-height-loose);
}
.chart-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: var(--space-40); /* 10rem = 160px */
}

.chart-loader-spinner {
  width: var(--space-10);   /* 2.5rem = 40px */
  height: var(--space-10);
  border: var(--space-0-8) solid var(--color-border); /* ~3px */
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: chart-loader-spin var(--motion-duration-spin) linear infinite;
}

@keyframes chart-loader-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ══════════════════════════════════════════════════════════
   HOME PAGE
══════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.home-page {
  --font-family-base: 'Inter', system-ui, sans-serif;
  --font-family-display: 'Inter', system-ui, sans-serif;
  /* The whole page sits on the cream base; cards/sections layer on top. */
  background: var(--color-bg-cream);
  display: flex;
  flex-direction: column;
  padding-top: var(--space-10);
  height: 100vh;
  /* Without this, the FilterBar's dropdown panel (position: absolute, up
     to --space-22 tall) can extend past this page's own 100vh box — since
     nothing here clips it, the browser adds a genuine page-level scrollbar
     to reveal the overflow the moment the panel opens. .um-page already
     has this; the other pages using FilterBar were missing it. */
  overflow: hidden;
}

.home-filters-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 100vh minus navbar (--space-10) minus filter strip (--space-10) */
  height: calc(100vh - var(--space-10) - var(--space-10));
}

.home-body {
  flex: 1;
  padding: var(--space-md) var(--space-5) var(--space-2-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  overflow-y: auto;
  min-height: 0;
}

.home-body--hidden {
  display: none;
}

/* ══════════════════════════════════════════════════════════
   HEADER CARD
══════════════════════════════════════════════════════════ */
.home-header-card {
  /* Same lockup as login/loading (tokens: --color-hero-gradient / --color-bg-cream). */
  background: var(--color-hero-gradient), var(--color-bg-cream);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-height: var(--space-30);
  box-shadow: 0 var(--space-xs) var(--space-5) var(--color-shadow-card-lg);
  overflow: hidden;
  font-family: var(--font-family-display);
  position: relative;
}

.home-header-card:focus-visible {
  outline: var(--space-0-5) solid var(--color-accent);
  outline-offset: var(--space-0-6);
}

.home-header-text {
  display: flex;
  flex-direction: column;
  z-index: 1;
  flex: 1;
  min-width: 0;
}

.home-hi {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-black);
  margin: 0;
  font-weight: var(--font-weight-regular);
  display: flex;
  align-items: center;
}

.home-username {
  font-weight: var(--font-weight-extrabold);
  color: var(--color-accent);
  margin-left: var(--space-0-5);
}

.home-welcome {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-relaxed);
  color: var(--color-black);
  margin: 0;
}

.home-product {
  font-family: "Manrope", var(--font-family-base);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-snug);
  color: var(--color-accent);
  margin-top: var(--space-2-5);
}

.home-description {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: var(--color-black);
  font-style: italic;
  margin-top: var(--space-2-5);
}

/* decorative image — right side, absolute */
.home-header-img-wrapper {
  position: absolute;
  right: var(--space-10);
  top: 0;
  bottom: 0;
  width: 25%;
  opacity: 0.35;
  display: flex;
  align-items: stretch;
  pointer-events: none;
}

.home-header-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

/* ══════════════════════════════════════════════════════════
   INSIGHTS SECTION — no card wrapper
══════════════════════════════════════════════════════════ */
.home-section-insights {
  padding: var(--space-xs) 0 0;
}

/* Error state: constrained to the same height as the metric card row */
.home-insights-error {
  height: var(--space-9);
  display: flex;
  align-items: stretch;
}

.home-insights-error .page-error-container {
  min-height: unset;
  height: 100%;
  width: 100%;
  background: var(--color-lightgrey);
  border-radius: var(--radius-md);
}

.home-insights-error .page-error-content {
  padding: var(--space-md) var(--space-xl);
  gap: var(--space-sm);
}

.home-insights-error .page-error-icon svg {
  width: var(--space-xxl);
  height: var(--space-xxl);
}

.home-insights-error .page-error-title {
  font-size: var(--font-size-base);
}

.home-insights-error .page-error-message {
  font-size: var(--font-size-xs);
}

.home-insights-error .page-error-button {
  padding: var(--space-0-8) var(--space-lg);
  font-size: var(--font-size-sm);
  margin-top: var(--space-0-4);
}

/* ══════════════════════════════════════════════════════════
   EXPLORE SECTION — white card wrapper
══════════════════════════════════════════════════════════ */
.home-section-explore {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-2-5) var(--space-lg) var(--space-2-5);
  box-shadow: 0 var(--space-xs) var(--space-5) var(--color-shadow-card-md);
}

/* ══════════════════════════════════════════════════════════
   INSIGHTS HEADING
══════════════════════════════════════════════════════════ */

.pulse-title {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-2xl);
  color: var(--color-black);
  text-align: center;
  line-height: var(--line-height-normal);
  border-radius: var(--radius-sm);
  outline: none;
}

.pulse-title:focus-visible {
  outline: var(--space-0-5) solid var(--color-accent);
  outline-offset: var(--space-0-6);
}

.pulse-highlight {
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}

/* ══════════════════════════════════════════════════════════
   CAROUSEL
══════════════════════════════════════════════════════════ */
.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel-track--fit {
  overflow-x: hidden;
  scroll-snap-type: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-page {
  min-width: 100%;
  flex-shrink: 0;
  scroll-snap-align: start;
  display: flex;
  gap: 0;
}

.carousel-item {
  flex: 0 0 calc(100% / 6);
  min-width: calc(100% / 6);
  padding: var(--space-1-5);
  box-sizing: border-box;
}

/* metric carousel item — equal flex share */
.carousel-item--metric {
  flex: 1 1 0;
  min-width: var(--space-9-375);
}

/* explore carousel item — fixed card width driven by JS via CSS custom prop */
.carousel-item--explore {
  flex: 0 0 var(--explore-card-w, var(--space-56));
  min-width: var(--explore-card-w, var(--space-56));
}

/* ══════════════════════════════════════════════════════════
   METRIC CARD — blue tinted bg
══════════════════════════════════════════════════════════ */
.metric-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-2-5) var(--space-md);
  border: var(--space-px) solid var(--color-metric-card-border);
  /* Subtle shadow matching the Explore card below (was a large, offset one). */
  box-shadow: 0 var(--space-xs) var(--space-2-5) var(--color-shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  min-height: var(--space-30);
  font-family: var(--font-family-display);
  overflow: hidden;
}

.metric-card:focus-visible {
  outline: var(--space-0-5) solid var(--color-accent);
  outline-offset: var(--space-0-6);
}

.metric-title {
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-xs);
  line-height: var(--line-height-normal);
}

.metric-value-row {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  margin-bottom: var(--space-xs);
  flex-wrap: wrap;
}

.metric-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  line-height: var(--line-height-relaxed);
  font-family: var(--font-family-display);
}

.metric-change {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  gap: var(--space-0-8);
  font-family: var(--font-family-display);
}

/* Delta tokens, not success/error-alt — matches KpiCard's trend colours
   (.kpi-change--up/--down) used on every other screen. */
.trend-up {
  color: var(--color-delta-positive);
}

.trend-down {
  color: var(--color-delta-negative);
}

/* details row */
.metric-details {
  display: flex;
  align-items: stretch;
  padding-top: var(--space-sm);
}

.metric-details--single {
  justify-content: flex-start;
}

.metric-details--multi {
  justify-content: space-between;
  width: 100%;
}

.metric-detail {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-0-5);
  font-size: var(--font-size-3xs);
  color: var(--color-black);
  font-family: var(--font-family-display);
}

.metric-detail--single {
  flex: none;
  align-items: flex-start;
}

.metric-detail--right {
  align-items: center;
}

.metric-detail-icon {
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-0-5);
}

.metric-detail-text {
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-medium);
  text-align: center;
  line-height: var(--line-height-normal);
}

.metric-detail-value {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
  text-align: center;
}

.metric-detail-divider {
  width: var(--space-px);
  background: var(--color-metric-card-border);
  margin: 0 var(--space-2-5);
  align-self: stretch;
}

/* ══════════════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════════════ */
.carousel-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--space-md);
}

.carousel-pagination-track {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
}

.dot {
  display: inline-block;
  width: var(--space-sm);
  height: var(--space-sm);
  border-radius: 50%;
  background: var(--color-grey);
  border: var(--space-px) solid var(--color-grey);
  cursor: pointer;
  transition: all var(--motion-duration-slow) ease;
  flex-shrink: 0;
  padding: 0;
  appearance: none;
}

.dot:focus-visible {
  outline: 0.125rem solid var(--color-accent);
  outline-offset: 0.1875rem;
}

.dot--active {
  background: var(--color-pagination-dot-active);
  width: var(--space-5);
  border-radius: var(--space-md);
  border-color: var(--color-pagination-dot-active);
}

/* ══════════════════════════════════════════════════════════
   EXPLORE SECTION
══════════════════════════════════════════════════════════ */
/* each explore card is its own snap target */
.explore-snap-item {
  scroll-snap-align: start;
}

.explore-title {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  color: var(--color-text-black);
  margin: 0 0 var(--space-sm);
}

.explore-card {
  flex: 1;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  border: var(--space-px) solid var(--color-explore-card-border);
  box-shadow: 0 var(--space-xs) var(--space-2-5) var(--color-shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 0;
  font-family: var(--font-family-display);
}

.explore-card-top {
  flex: 1;
}

.explore-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.explore-more-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-placeholder);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-none);
  padding: 0;
}

.explore-card-title {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  color: var(--color-accent);
  margin: 0 0 var(--space-xs);
  line-height: var(--line-height-normal);
}

.explore-card-desc {
  font-size: var(--font-size-2xs);
  color: var(--color-black);
  line-height: var(--line-height-relaxed);
  margin: var(--space-xs) 0 var(--space-md);
}

.explore-go-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-1-5) var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  transition: background var(--motion-duration-normal) ease;
  letter-spacing: var(--space-px);
}

.explore-go-btn:hover {
  background: var(--color-accent-hover);
}

/* ── No custom scrollbar on home page ────────────────────── */
.home-page,
.home-page * {
  scrollbar-width: none;
}

.home-page::-webkit-scrollbar,
.home-page *::-webkit-scrollbar {
  display: none;
}

/* ── Responsive ───────────────────────────────────────────
   .home-header-img is a wide (512×230) pattern. The base rule keeps it on
   the side (like the 100%-width desktop layout) but pins its box to
   top: 0; bottom: 0 — full card height, width a fixed 25% of the (now
   narrowing) card. As the card narrows, that box gets taller and narrower
   relative to the image's own shape, so object-fit: cover has to crop most
   of the pattern away to fill it. Keep the image on the side at every
   width (never stack it below the text) — just stop pinning the box to
   the card's full height and instead size the box itself down via
   aspect-ratio, using a height that scales with the viewport, so the box
   stays the image's own shape (no crop) and visibly shrinks as the window
   narrows, exactly like scaling down a smaller version of the 100% view. */
@media (max-width: 640px) {
  .home-header-card {
    /* .home-header-card has overflow: hidden, which per the flexbox spec
       gives it an automatic minimum main-size of 0 as a flex item of
       .home-body (min-height: var(--space-30) still applies as an explicit
       floor, but that's shorter than the card's actual content) — so on a
       short browser window, .home-body's flex layout can shrink the card
       below its content height, and the card's own overflow: hidden then
       clips that content. This is a latent issue at every width (also
       reproducible at desktop with a short enough window), but only
       addressed here to stay within the mobile-only scope of this fix.
       flex-shrink: 0 keeps the card at its full content height, so any
       shortfall in vertical space is handled by .home-body's
       overflow-y: auto scrolling the page, not by cropping the card. */
    flex-shrink: 0;
  }

  .home-header-img-wrapper {
    position: static;
    align-self: center;
    width: auto;
    height: clamp(3rem, 16vw, 5.5rem);
    aspect-ratio: 512 / 230;
  }

  .home-header-img {
    object-position: center;
  }
}

/* ── Font overrides within home page ─────────────────────── */

/* Navbar → Inter (reset Poppins override so Last Updated / Data Source use Inter) */
.home-page .navbar {
  --font-family-base: 'Inter', system-ui, sans-serif;
  --font-family-display: 'Inter', system-ui, sans-serif;
}

/* FilterBar → Inter (override Poppins CSS vars so all var() references inside resolve correctly) */
.home-page .fb-wrapper {
  --font-family-base: 'Inter', system-ui, sans-serif;
  --font-family-display: 'Inter', system-ui, sans-serif;
  font-family: 'Inter', system-ui, sans-serif;
  /* Every other page cancels FilterBar's default `position: sticky; top:
     var(--space-10)` the same way — Home was the one page missing it.
     That default sticky top-offset is computed relative to the nearest
     ancestor that establishes a scroll container, which includes
     `overflow: hidden` (added to .home-page above to fix the FilterBar
     panel's page-level-scrollbar bug) — not just `overflow: auto/scroll`.
     Before that fix .home-page had `overflow: visible` (no scroll
     container), so the sticky offset was measured from the real
     viewport and FilterBar landed right under the fixed Navbar by
     coincidence; once .home-page became a scroll container, the same
     `top` offset started being measured from .home-page's own box
     instead, pushing the bar down by roughly another navbar-height.
     Matching every other page's override removes the dependency on
     which ancestor happens to be a scroll container entirely. */
  position: relative;
  top: 0;
}

/* Insights KPI detail text + value below icon → Inter */
.metric-detail-text,
.metric-detail-value {
  font-family: 'Inter', system-ui, sans-serif;
}

/* Explore card title ("Performance Overview") → Inter */
.explore-card-title {
  font-family: 'Inter', system-ui, sans-serif;
}

/* Explore card description → Inter */
.explore-card-desc {
  font-family: 'Inter', system-ui, sans-serif;
}
.app-tabs-wrapper {
  --app-tabs-h: calc(var(--space-xxl) + var(--space-0-5));
  background: var(--color-lightgrey);
  border-bottom: var(--space-px) solid var(--color-border);
  position: sticky;
  top: var(--space-10);
  z-index: 101;
  min-height: var(--app-tabs-h);
  display: flex;
  align-items: stretch;
}

.app-tabs {
  flex: 1;
  min-width: 0;
  display: flex;
  padding: 0 var(--space-lg);
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.app-tabs::-webkit-scrollbar {
  display: none;
}

.app-tab {
  scroll-snap-align: start;
  padding: var(--space-2-5) var(--space-md);
  background: none;
  border: none;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-family-display);
  transition:
    color var(--motion-duration-fast) ease,
    border-color var(--motion-duration-fast) ease;
}

.app-tab:hover {
  color: var(--color-primary);
}

.app-tab--active {
  color: var(--color-primary);
  border-bottom-color: transparent;
  font-weight: var(--font-weight-semibold);
  position: relative;
}

.app-tab--active::after {
  content: "";
  position: absolute;
  inset: var(--space-xs) var(--space-xs);
  background: var(--color-lightblue);
  border-radius: 0;
  z-index: -1;
}

/* ── Scroll arrows ───────────────────────────────────────── */
.app-tabs-arrow {
  flex-shrink: 0;
  width: var(--space-7);
  border: none;
  background: var(--color-lightgrey);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.app-tabs-arrow-icon {
  width: var(--space-3-5);
  height: var(--space-3-5);
  display: block;
  flex-shrink: 0;
}

.app-tabs-arrow-icon--left {
  transform: rotate(180deg);
}

/* Dropdown wrapper */
.app-tab-dropdown-wrapper {
  position: relative;
}

.app-tab--has-chevron {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.app-tab-chevron {
  display: inline-flex;
  align-items: center;
  transition: transform var(--motion-duration-fast) ease;
}

.app-tab-chevron--open {
  transform: rotate(180deg);
}

.app-tab-chevron-icon {
  display: block;
  width: var(--space-2-5);
  height: var(--space-2-5);
  flex-shrink: 0;
}

/* Dropdown menu — top/left/minWidth set as direct inline styles in AppTabs.tsx */
.app-tab-dropdown {
  position: fixed;
  background: var(--color-bg-card);
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-dropdown);
  z-index: 1100;
  max-height: 50vh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-sm);
}

.app-tab-dropdown::-webkit-scrollbar {
  width: 4px;
}
.app-tab-dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.app-tab-dropdown::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
}
.app-tab-dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}
.app-tab-dropdown {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.app-tab-dropdown-item {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-xs) var(--space-sm) calc(var(--space-xs) + 4px);
  background: none;
  border: none;
  border-left: 1.5px solid var(--color-kpigrey);
  text-align: left;
  font-size: var(--font-size-xs);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease;
}

.app-tab-dropdown-item:hover {
  background: var(--color-bg-hover-light);
  color: var(--color-primary);
}

.app-tab-dropdown-item--active {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  background: var(--color-bg-hover-light);
  border-left-color: var(--color-primary);
}
.ib-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--color-text-placeholder);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: var(--line-height-none);
  transition: color var(--motion-duration-fast) ease;
}

.ib-btn:hover {
  color: var(--color-primary);
}

.ib-icon {
  display: block;
  width: var(--space-3-5);   /* 0.875rem = 14px */
  height: var(--space-3-5);
  flex-shrink: 0;
}

/* Rendered via React portal at document.body */
.ib-tooltip {
  position: fixed;
  display: block;
  background: var(--color-tooltip-bg);
  color: var(--color-tooltip-text);
  font-size: var(--font-size-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-tooltip);
  max-width: var(--space-31);   /* 18rem = 288px */
  white-space: normal;
  text-align: left;
  line-height: 1.5;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
}

/* Upward-pointing triangle above the tooltip */
.ib-tooltip::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-1-5));   /* -0.375rem */
  left: var(--space-2-5);             /* 0.625rem */
  border-left: var(--space-1-5) solid transparent;
  border-right: var(--space-1-5) solid transparent;
  border-bottom: var(--space-1-5) solid var(--color-tooltip-bg);
}

/* When tooltip is right-aligned, flip the triangle to the right */
.ib-tooltip--right::before {
  left: auto;
  right: var(--space-2-5);
}

/* When tooltip is centered on the button, triangle tracks the button center */
.ib-tooltip--centered::before {
  left: var(--ib-triangle-left, 50%);
  transform: translateX(-50%);
}
.kpi-card {
  flex: 1;
  background: var(--color-lightgrey);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  border: var(--space-px) solid var(--color-border);
  box-shadow: 0 var(--space-0-5) var(--space-sm) var(--color-shadow-card);
  min-width: 0;
  font-family: var(--font-family-display);
  position: relative;
  z-index: 0;
}

/* Value/label/trend summary — kept as an accessibility sibling of the info
   button rather than its wrapper; see the comment in KpiCard.tsx. */
.kpi-card-summary {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-sm);
  min-width: 0;
  height: 100%;
  outline: none;
}

.kpi-card-summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -3px;
  position: relative;
  z-index: 10;
}

.kpi-card-info-btn {
  position: absolute;
  top: var(--space-md);
  right: var(--space-lg);
}


/* ── Top row ────────────────────────────────────────────── */
.kpi-card-header {
  display: flex;
  align-items: flex-start;
  /* Only the label lives here now — the info button is a positioned
     sibling of kpi-card-summary, not a flex item in this row. Reserve
     room roughly matching the icon's own footprint so a long, truncated
     label doesn't render underneath it. */
  padding-right: var(--space-5);
  gap: var(--space-sm);
  min-width: 0;
}

.kpi-label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-kpi-title);
  font-weight: var(--font-weight-regular);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ── Bottom row ─────────────────────────────────────────── */
.kpi-value-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xs);
}

.kpi-value {
  margin-top: var(--space-1-5);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  line-height: var(--line-height-tight);
  cursor: default;
}

.kpi-value-tooltip {
  position: fixed;
  background: var(--color-tooltip-bg);
  color: var(--color-tooltip-text);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-tooltip);
  line-height: 1.5;
}

.kpi-value-tooltip::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-1-5));
  left: 50%;
  transform: translateX(-50%);
  border-left: var(--space-1-5) solid transparent;
  border-right: var(--space-1-5) solid transparent;
  border-bottom: var(--space-1-5) solid var(--color-tooltip-bg);
}

/* Tooltip sits above its anchor (KPI title) instead of below it — flip the
   arrow to point down at the anchor instead of up. */
.kpi-value-tooltip--above::before {
  top: auto;
  bottom: calc(-1 * var(--space-1-5));
  border-bottom: none;
  border-top: var(--space-1-5) solid var(--color-tooltip-bg);
}

.kpi-change {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-bottom: var(--space-px);
}

.kpi-change--up {
  color: var(--color-delta-positive);
}
.kpi-change--down {
  color: var(--color-delta-negative);
}
.kpi-change--neutral {
  color: var(--color-text-muted);
}

.kpi-trend-icon {
  display: block;
  width: var(--space-2-75);
  height: var(--space-2-75);
  flex-shrink: 0;
}

/* ── Empty / no-data state in KPI row ───────────────────── */
.kpi-card--no-data {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  color: var(--color-text-muted);
}

.kpi-card--no-data-label {
  font-size: var(--font-size-lg);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}
.plotly-chart-wrapper {
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ── Accessible focus ring around the chart ─────────────── */
.plotly-chart-focus {
  outline: none;
  position: relative;
}

.plotly-chart-focus:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Visually hidden data summary for screen readers ─────── */
.pc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.plotly-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.plotly-chart-titles {
  display: flex;
  flex-direction: column;
  gap: var(--space-px);
}

.plotly-chart-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: 0;
  font-family: var(--font-family-display);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.plotly-chart-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  font-family: var(--font-family-base);
}

/* ⓘ info button — same style as KpiCard */
.plotly-info-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--color-text-placeholder);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
  transition: color var(--motion-duration-fast) ease;
  position: relative;
}

.plotly-info-btn:hover {
  color: var(--color-primary);
}

/* header right side — actions + download */
.plotly-chart-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.plotly-download-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-0-8);
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition:
    color var(--motion-duration-fast) ease,
    background var(--motion-duration-fast) ease;
}

.plotly-download-btn:hover {
  color: var(--color-primary);
  background: var(--color-bg-hover-light);
}

.plotly-chart-container {
  width: 100%;
  overflow: visible;
}

/* Allow Plotly hover labels to extend beyond the SVG boundary
   so tooltips near right/top edges flip inward instead of clipping */
.plotly-chart-container svg.main-svg {
  overflow: visible;
}

/* ── Info tooltip — same style as KpiCard ───────────────── */
.plotly-info-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-1-5));
  left: 0;
  background: var(--color-tooltip-bg);
  color: var(--color-tooltip-text);
  font-size: var(--font-size-xs);
  padding: var(--space-sm) var(--space-2-5);
  border-radius: var(--radius-sm);
  z-index: 50;
  pointer-events: none;
  box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-tooltip);
  max-width: var(--space-31);
  white-space: normal;
  text-align: left;
  line-height: var(--line-height-relaxed);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
}

.plotly-info-btn:hover .plotly-info-tooltip {
  display: block;
}

.plotly-icon {
  display: block;
  width: var(--space-3-5);
  height: var(--space-3-5);
  flex-shrink: 0;
}
.dt-wrapper {
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-display);
  min-width: 0;
  position: relative;
}

/* ── Table container ─────────────────────────────────────── */
.dt-body {
  border: var(--space-px) solid var(--color-border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* ── Vertical scroll (default) ───────────────────────────── */
.dt-vscroll {
  width: 100%;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* ── Scroll area wrapper (relative for vertical thumb) ───── */
.dt-inner-wrap {
  position: relative;
  overflow: hidden;
}

/* ── Horizontal + vertical scroll inner (native bars hidden) */
.dt-inner-h {
  overflow-x: auto;
  overflow-y: auto;
  max-height: var(--dt-max-h, var(--space-22));
  /* auto (not contain): once this table's own scroll hits its top/bottom
     edge, let the wheel/touch input chain through to the page scroll
     instead of dead-ending here. */
  overscroll-behavior: auto;
  scrollbar-width: none;
  outline: none;
}
.dt-inner-h::-webkit-scrollbar {
  display: none;
}
.dt-inner-h:focus-visible {
  outline: var(--space-0-5) solid var(--color-primary);
  outline-offset: calc(-1 * var(--space-0-5));
}

/* ── Custom vertical track ───────────────────────────────── */
.dt-vtrack {
  position: absolute;
  top: var(--dt-vtrack-top, var(--space-xs));
  bottom: var(--space-xs);
  right: var(--space-0-8);
  width: var(--space-1-5);
  cursor: pointer;
  z-index: 10;
}

/* Track stays mounted (so it's measurable on first layout) but is
   visually hidden + non-interactive when content doesn't overflow. */
.dt-vtrack--hidden {
  opacity: 0;
  pointer-events: none;
}

/* Reserve a gutter for the vertical thumb while it's visible so it never
   overlays the last column's values. */
.dt-inner-wrap--vscroll .dt-inner-h {
  margin-right: var(--space-2-5);
}

/* Paint the gutter's header-height strip to match the thead (incl. its
   bottom divider) so the header bar reads as one continuous band. */
.dt-inner-wrap--vscroll::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--space-2-5);
  height: var(--dt-vtrack-top, 0px);
  box-sizing: border-box;
  background: var(--color-lightgrey);
  border-bottom: var(--space-px) solid var(--color-border);
}

.dt-vthumb {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--dt-vthumb-size, 0px);
  top: var(--dt-vthumb-offset, 0px);
  background: var(--color-white);
  border: var(--space-px) solid var(--color-primary);
  border-radius: var(--radius-md);
  cursor: grab;
  transition: background var(--motion-duration-fast) ease;
}

.dt-vthumb:hover,
.dt-vthumb:active {
  background: var(--color-scrollbar-thumb-hover);
  cursor: grabbing;
}

/* ── Custom horizontal track ─────────────────────────────── */
.dt-htrack {
  position: relative;
  height: var(--space-2-5);
  cursor: pointer;
  margin: var(--space-xs) 0 0;
}

.dt-hthumb {
  position: absolute;
  height: var(--space-1-5);
  top: var(--space-0-8);
  width: var(--dt-hthumb-size, 0px);
  left: var(--dt-hthumb-offset, 0px);
  background: var(--color-white);
  border: var(--space-px) solid var(--color-primary);
  border-radius: var(--radius-md);
  cursor: grab;
  transition: background var(--motion-duration-fast) ease;
  z-index: 1;
}

.dt-hthumb:hover,
.dt-hthumb:active {
  background: var(--color-scrollbar-thumb-hover);
  cursor: grabbing;
}

/* ── Clickable row ───────────────────────────────────────── */
.dt-row--clickable {
  cursor: pointer;
}

/* ── Table layout variant ────────────────────────────────── */
.dt-table--fixed {
  table-layout: fixed;
}

/* ── Table base ─────────────────────────────────────────── */
.dt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  table-layout: auto;
}

/* -- Header ---------------------------------------------- */
.dt-table thead tr {
  background: var(--color-lightgrey);
}

/* Sticky header: applied via stickyHeader prop */
.dt-sticky-header thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.dt-table th {
  padding: var(--space-md) var(--space-lg);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
  border-bottom: var(--space-px) solid var(--color-border);
  white-space: nowrap;
  word-break: normal;
  background: var(--color-lightgrey);
  vertical-align: middle;
}

.dt-th-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  white-space: nowrap;
}

.dt-th-label {
  min-width: 0;
  white-space: nowrap;
  line-height: var(--line-height-normal);
}

.dt-th-actions {
  display: flex;
  align-items: center;
  gap: var(--space-0-8);
  flex-shrink: 0;
}

.dt-th-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-0-6);
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: background var(--motion-duration-fast) ease;
}

.dt-th-btn:hover {
  background: var(--color-bg-hover-light);
}

/* -- Column filter dropdown ------------------------------ */
.dt-filter-wrap {
  position: relative;
}

.dt-filter-dropdown {
  z-index: 99;
  background: var(--color-white);
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-popover);
  padding: var(--space-sm);
  min-width: var(--space-40);
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.dt-filter-input {
  border: var(--space-px) solid var(--color-input-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1-2) var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  outline: none;
  width: 100%;
  font-family: var(--font-family-base);
}

.dt-filter-input:focus {
  border-color: var(--color-border-strong);
}

.dt-filter-actions {
  display: flex;
  gap: var(--space-1-5);
  justify-content: flex-end;
}

.dt-filter-clear {
  background: none;
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1-5) var(--space-5);
  font-size: var(--font-size-base);
  color: var(--color-primary);
  cursor: pointer;
  font-family: var(--font-family-display);
  transition: border-color var(--motion-duration-fast) ease;
}

.dt-filter-clear:hover {
  border-color: var(--color-border-strong);
}

.dt-filter-apply {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-1-5) var(--space-xl);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  font-family: var(--font-family-display);
  transition: background var(--motion-duration-fast) ease;
}

.dt-filter-apply:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.dt-filter-apply:disabled {
  background: var(--color-border);
  color: var(--color-text-placeholder);
  cursor: not-allowed;
  opacity: 0.6;
}

.dt-filter-error {
  margin: 0 var(--space-md) var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--color-error);
  text-align: right;
}

/* -- Body rows ------------------------------------------- */
.dt-table td {
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text-body);
  border-bottom: var(--space-px) solid var(--color-border);
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  font-size: var(--font-size-sm);
  vertical-align: middle;
  background: var(--color-white);
  text-align: center;
}

.dt-table tbody tr:nth-child(even) td {
  background: var(--color-white);
}

.dt-table tbody tr:hover td {
  background: var(--color-bg-hover-light);
}

.dt-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-xxl);
  font-size: var(--font-size-sm);
}

/* -- Row states ------------------------------------------ */
.dt-row-selected td {
  background: var(--color-rowSelectedBg) !important;
}

.dt-row-selected:hover td {
  background: var(--color-rowSelectedHoverBg) !important;
}

/* ── Pagination ─────────────────────────────────────────── */
.dt-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border: var(--space-px) solid var(--color-border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--color-white);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.dt-rows-label {
  white-space: nowrap;
}

.dt-rpp-wrap {
  position: relative;
}

.dt-rpp-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-0-6);
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-0-4) var(--space-1-2);
  background: var(--color-white);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-primary);
  cursor: pointer;
  min-width: var(--space-14);
}

.dt-rpp-chevron {
  display: block;
  width: var(--space-2-5);
  height: var(--space-2-5);
  flex-shrink: 0;
  transition: transform var(--motion-duration-fast) ease;
}

.dt-rpp-chevron--open {
  transform: rotate(180deg);
}

.dt-rpp-dropdown {
  position: absolute;
  bottom: calc(100% + var(--space-xs));
  left: 0;
  right: 0;
  background: var(--color-white);
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-popover);
  overflow: hidden;
  z-index: 10;
}

.dt-rpp-option {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-sm);
  background: none;
  border: none;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-body);
  cursor: pointer;
  text-align: center;
}

.dt-rpp-option:hover {
  background: var(--color-bg-hover-light);
}

.dt-rpp-option--selected {
  background: var(--color-lightgrey);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.dt-page-info {
  white-space: nowrap;
  min-width: calc(var(--space-xxl) * 2); /* 2rem × 2 = 4rem */
  text-align: center;
}

.dt-nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
  font-size: var(--font-size-2xl);
  line-height: 1;
  padding: 0 var(--space-0-4);
  display: flex;
  align-items: center;
  transition: color var(--motion-duration-fast) ease;
}

.dt-nav-btn:disabled {
  color: var(--color-text-placeholder);
  cursor: not-allowed;
}

/* -- Multi-select filter dropdown ------------------------ */
.dt-filter-multi {
  min-width: var(--space-56);
  padding: var(--space-sm) 0;
  overflow: hidden;
}

.dt-multi-list {
  padding-bottom: var(--space-md);
}

/* Prevent flex from compressing the scroll area — csb-content height must match csb-root */
.dt-filter-multi .csb-root {
  flex-shrink: 0;
}

/* Push native scrollbar outside csb-root's overflow:hidden clip — cross-browser */
.dt-filter-multi .csb-content {
  width: calc(100% + 20px);
  padding-right: 20px;
  box-sizing: content-box;
}

.dt-multi-count {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.dt-filter-multi .dt-filter-actions {
  padding: var(--space-sm) var(--space-sm) 0;
  border-top: var(--space-px) solid var(--color-border);
  margin-top: var(--space-1-5);
}

.dt-filter-multi .dt-filter-input {
  margin: 0 var(--space-sm) var(--space-1-5);
  width: calc(100% - var(--space-lg));
}

.dt-highlight {
  background: var(--color-subtleblue);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--space-0-5);
  padding: 0 var(--space-px);
}

.dt-multi-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-1-4) var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dt-multi-option:hover {
  background: var(--color-bg-hover-light);
}

.dt-multi-option input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: var(--space-3-5);
  height: var(--space-3-5);
  flex-shrink: 0;
  cursor: pointer;
}

.dt-multi-select-all {
  border-bottom: var(--space-px) solid var(--color-border);
  margin-bottom: var(--space-xs);
  padding-bottom: var(--space-sm);
}

.dt-multi-select-all em {
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.dt-multi-no-results {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

.dt-empty-val {
  color: var(--color-text-placeholder);
  font-style: italic;
}
/* Native scroll only — no custom thumb/JS wheel handling. Scoped narrowly to
   dropdown option lists, deliberately separate from CustomScrollbar. */
.dsl-list {
  overflow-y: auto;
  overflow-x: hidden;
  /* Stop wheel scroll from chaining to the page once the list hits its top/
     bottom edge. Safe here specifically because this class is only ever
     used for a small floating option list, never a page-level or nested
     scroll container — so there's no ancestor scroller this could conflict
     with the way it did on CustomScrollbar's shared class. */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) transparent;
}

.dsl-list::-webkit-scrollbar {
  width: var(--space-1-5);
}

.dsl-list::-webkit-scrollbar-track {
  background: transparent;
}

.dsl-list::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: var(--radius-md);
}

.dsl-list::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-thumb-hover);
}
.sd-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  border: var(--space-px) solid var(--color-kpigrey);
  border-radius: var(--radius-input);
  width: fit-content;
}

.sd-label {
  position: absolute;
  top: calc(var(--space-px) * -6);
  left: var(--space-sm);
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  background: var(--color-white);
  padding: 0 var(--space-0-8);
  white-space: nowrap;
  pointer-events: none;
}

/* ── Trigger button ──────────────────────────────────────── */
.sd-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-display);
  color: var(--color-black);
  min-width: var(--space-8);
  text-align: left;
}

.sd-value {
  flex: 1;
}

.sd-chevron {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  transition: transform var(--motion-duration-fast) ease;
  flex-shrink: 0;
}

.sd-chevron--open {
  transform: rotate(180deg);
}

/* ── Dropdown list ───────────────────────────────────────── */
/* Rendered through a portal to document.body (see useDropdownPosition) so it
   can't be visually clipped by an ancestor with overflow:hidden (e.g. a
   chart card) — position/top/bottom/left/width are all set inline per
   instance from the hook's fixed-viewport-coordinate calculation. */
.sd-list {
  background: var(--color-white);
  border: var(--space-px) solid var(--color-kpigrey);
  border-radius: var(--radius-sm);
  list-style: none;
  z-index: 9999;
  overflow: hidden;
  box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-dropdown);
  padding: var(--space-0-5) 0;
}

.sd-option {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-display);
  color: var(--color-violet);
  cursor: pointer;
  transition: background var(--motion-duration-fast) ease;
}

.sd-option:hover {
  background: var(--color-lightgrey);
}

.sd-option--active {
  background: var(--color-dropdown);
  font-weight: var(--font-weight-medium);
}

.sd-align-end {
  align-self: flex-end;
}

.sd-chevron-icon {
  display: block;
  width: var(--space-sm);
  height: var(--space-1-5);
  flex-shrink: 0;
}
/* Response Curve modal — kept visually identical to the Media Optimisation
   Results screen's `.mor-modal` (see MediaOptimisationResults.css): same
   centered overlay above the navbar (z-index 1000), lightgrey header bar with
   title + action icons, and a scrollable white body. */
.pgm-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-backdrop-overlay);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pgm-modal {
  background: var(--color-white);
  border-radius: var(--radius-md);
  width: min(72rem, 92vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 var(--space-5) var(--space-15) var(--color-shadow-tooltip);
  overflow: hidden;
}

.pgm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--space-px) solid var(--color-border);
  background: var(--color-lightgrey);
  flex-shrink: 0;
}

.pgm-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: 0;
}

.pgm-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.pgm-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--color-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition:
    background 0.15s,
    color 0.15s;
  padding: var(--space-0-8);
}

.pgm-icon-btn:hover {
  background: var(--color-section-icon-hover-bg);
  color: var(--color-primary);
}

.pgm-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition:
    background var(--motion-duration-fast),
    color var(--motion-duration-fast);
  padding: 0;
}

.pgm-close:hover {
  color: var(--color-primary);
  background: var(--color-bg-hover-light);
}

.pgm-close-icon {
  display: block;
  width: var(--space-4-5);
  height: var(--space-4-5);
  flex-shrink: 0;
}

.pgm-body {
  overflow-y: auto;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
}

.pgm-no-data {
  align-items: center;
  justify-content: center;
  min-height: var(--space-50);
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}
.po-page {
  height: 100vh;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  padding-top: var(--space-10);
  /* Without this, the FilterBar's dropdown panel (position: absolute,
     up to --space-22 tall) can extend past this page's own 100vh box —
     since nothing here clips it, the browser adds a genuine page-level
     scrollbar to reveal the overflow the moment the panel opens, on top
     of .po-body's own CustomScrollbar. .um-page already has this; the
     other pages using FilterBar were missing it. */
  overflow: hidden;
}

/* AppTabs: disable sticky — page no longer window-scrolls */
.po-page .app-tabs-wrapper {
  position: static;
}

/* FilterBar override — white bg, inset black line matches po-body horizontal padding */
.po-page .fb-wrapper {
  position: relative;
  top: 0;
  /* cancel the sticky top offset from FilterBar.css */
  background: var(--color-white);
  border-bottom: none;
  margin: 0;
}

/* Divider below FilterBar — inset to match body padding */
.po-filter-divider {
  height: var(--space-px);
  background: var(--color-kpigrey);
  margin: 0 var(--space-lg);
}

/* Black divider line (after KPIs, after charts) */
.po-kpi-divider {
  height: var(--space-px);
  background: var(--color-kpigrey);
  margin: 0;
}


.po-kpi-note {
  text-align: right;
  font-size: var(--font-size-sm);
  color: var(--color-kpiblack);
  font-family: var(--font-family-base);
  padding: 0 var(--space-md);
  padding-top: var(--space-sm);
  margin-bottom: calc(var(--space-sm) * -1);
}

.po-body {
  flex: 1;
  min-height: 0;
}

.po-body-content {
  padding: 0 var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.po-kpi-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 var(--space-md) var(--space-md);
  padding-bottom: var(--space-xs);
}

.po-kpi-row::-webkit-scrollbar {
  display: none;
}

/* each KPI card gets a minimum width so row scrolls instead of cards shrinking */
.po-kpi-row .kpi-card {
  min-width: var(--space-35);
  flex: 1 0 var(--space-35);
  scroll-snap-align: start;
}

/* ── Charts row — grid ───────────────────────────────────── */
.po-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* Single visible chart takes full width, no divider */
.po-charts-row--single {
  grid-template-columns: 1fr;
}

.po-charts-row--has-divider {
  border-bottom: var(--space-px) solid var(--color-kpigrey);
  padding-bottom: var(--space-md);
}

.po-chart-half:first-child {
  border-right: var(--space-px) solid var(--color-kpigrey);
}

.po-charts-row--single .po-chart-half:first-child {
  border-right: none;
}

/* full-width panel (Annual Sales) */
.po-chart-full {
  background: var(--color-bg-card);
  padding: var(--space-xs) var(--space-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.po-chart-half {
  background: var(--color-white);
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.po-chart-half:first-child .po-chart-inner {
  padding-right: var(--space-md);
}

.po-chart-half:nth-child(2) .po-chart-inner {
  padding-left: var(--space-md);
}

/* inner wrapper — carries the padding and enforces minimum width */
.po-chart-inner {
  min-width: var(--space-34);
  padding: var(--space-md) var(--space-md) var(--space-md);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-xs);
}

/* ── Chart header ─────────────────────────────────────────── */
.po-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.po-chart-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: 0;
  font-family: var(--font-family-display);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.po-chart-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-kpiblack);
  margin: var(--space-px) 0 0;
  font-family: var(--font-family-base);
}

/* ── Toggle group ─────────────────────────────────────────── */
.po-toggle-group {
  display: flex;
  border: var(--space-px) solid var(--color-primary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.po-toggle {
  padding: var(--space-xs) var(--space-2-5);
  background: none;
  border: none;
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  cursor: pointer;
  transition:
    background var(--motion-duration-fast) ease,
    color var(--motion-duration-fast) ease;
}

.po-toggle--active {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ── Chart action bar ────────────────────────────────────── */
.po-chart-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.po-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
  padding: var(--space-0-8);
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition:
    color var(--motion-duration-fast) ease,
    background var(--motion-duration-fast) ease;
}

.po-icon-btn:hover {
  color: var(--color-primary);
  background: var(--color-bg-hover-light);
}

/* ── YoY chart year label ────────────────────────────────── */
.po-yoy-chart-wrap {
  display: flex;
  flex-direction: column;
}

.po-yoy-year-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  padding: 0 var(--space-lg) 0 var(--space-12);
  /* 1rem = Plotly r:16px, 3rem = Plotly l:48px */
}

/* Multi-bracket container — sits below the chart, aligned to plot area */
.po-yoy-brackets {
  position: relative;
  display: flex;
  height: var(--space-xxl);
  box-sizing: border-box;
}

/* Each bracket item is absolutely positioned by left% + width% */
.po-yoy-bracket-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

/* Vertical tick at the left edge of each bracket (except the first) */
.po-yoy-bracket-divider {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--space-px);
  height: var(--space-0-6rem);
  background: var(--color-kpigrey);
  transform: translateX(-50%);
}

.po-yoy-year-line {
  width: 100%;
  border-top: var(--space-px) solid var(--color-kpigrey);
  position: relative;
}

.po-yoy-year-line::before,
.po-yoy-year-line::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--space-px);
  height: var(--space-sm);
  background: var(--color-kpigrey);
}

.po-yoy-year-line::before {
  left: 0;
}

.po-yoy-year-line::after {
  right: 0;
}

.po-yoy-year-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-body);
  font-family: var(--font-family-display);
}

/* ── Flip-to-table view ──────────────────────────────────── */
.po-flip-table-wrap {
  overflow-y: auto;
  max-height: var(--space-33);
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
}

.po-flip-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-display);
}

.po-flip-table thead tr {
  background: var(--color-white);
  position: sticky;
  top: 0;
}

.po-flip-table th {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
  border-bottom: var(--space-px) solid var(--color-border);
  white-space: nowrap;
}

.po-flip-table td {
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text-body);
  border-bottom: var(--space-px) solid var(--color-border);
}

.po-flip-table tbody tr:hover {
  background: var(--color-bg-hover-light);
}

/* ── Table pagination ────────────────────────────────────── */
.po-table-pagination {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  justify-content: flex-end;
  padding: var(--space-xs) 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.po-table-rows-select {
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-px) var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  background: var(--color-white);
}

.po-table-nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
  padding: var(--space-px) var(--space-xs);
  font-size: var(--font-size-base);
  display: flex;
  align-items: center;
  line-height: var(--line-height-none);
}

.po-table-nav-btn:disabled {
  color: var(--color-text-placeholder);
  cursor: not-allowed;
}

/* ── Platform Performance Analysis ───────────────────────── */
.po-full-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: var(--space-xs) var(--space-md) var(--space-sm);
}

.po-full-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── Platform Performance table ──────────────────────────── */
.po-perf-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: var(--space-22);
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
}

.po-perf-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-family-display);
  font-size: var(--font-size-sm);
  min-width: var(--space-32);
}

.po-perf-table thead tr {
  background: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 1;
}

.po-perf-table th {
  padding: var(--space-2-5) var(--space-lg);
  text-align: left;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
  border-bottom: var(--space-px) solid var(--color-border);
  white-space: nowrap;
}

.po-th-inner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
}

.po-perf-table td {
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text-body);
  border-bottom: var(--space-px) solid var(--color-border);
  white-space: nowrap;
}

.po-perf-table .td-platform {
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}

.td-trend {
  width: var(--space-xl);
  text-align: center;
  padding: var(--space-sm) var(--space-sm);
}

.po-trend-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  padding: 0;
  transition: color var(--motion-duration-fast) ease;
}

.po-trend-icon-btn:hover {
  color: var(--color-accent);
}

.po-perf-table tbody tr:hover {
  background: var(--color-bg-hover-light);
}

/* ── Table footer (pagination + action buttons) ──────────── */
.po-table-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.po-action-btns {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
  margin-top: var(--space-xs);
}

.po-btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-1-5) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-display);
  cursor: pointer;
  transition: background var(--motion-duration-fast) ease;
}

.po-btn-primary:hover {
  background: var(--color-primary-hover);
}

.po-btn-secondary {
  background: var(--color-white);
  color: var(--color-primary);
  border: var(--space-px) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-1-5) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-display);
  cursor: pointer;
  transition: background var(--motion-duration-fast) ease;
}

.po-btn-secondary:hover {
  background: var(--color-bg-hover-light);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1200px) {
  .po-kpi-row {
    flex-wrap: wrap;
  }
}

/* Below ~600px, flex-wrap's natural reflow depends on each card's own
   min-width vs. the exact remaining space, which can land on 1-per-row
   (a lot of dead space beside each card) as often as 2. Switch to an
   explicit 2-column grid so mobile always gets a predictable 2-and-2
   layout; an odd trailing card spans both columns instead of leaving an
   empty cell beside it. */
@media (max-width: 600px) {
  .po-kpi-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .po-kpi-row .kpi-card:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1024px) {
  .po-charts-row {
    grid-template-columns: 1fr;
  }

  .po-chart-half:first-child {
    border-right: none;
    border-bottom: var(--space-px) solid var(--color-kpigrey);
  }

  .po-chart-half:first-child .po-chart-inner,
  .po-chart-half:nth-child(2) .po-chart-inner {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}
.bp-page {
  height: 100vh;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  padding-top: var(--space-10);
  /* Without this, the FilterBar's dropdown panel (position: absolute,
     up to --space-22 tall) can extend past this page's own 100vh box —
     since nothing here clips it, the browser adds a genuine page-level
     scrollbar to reveal the overflow the moment the panel opens, on top
     of .bp-body's own CustomScrollbar. .um-page already has this; the
     other pages using FilterBar were missing it. */
  overflow: hidden;
}

.bp-page .app-tabs-wrapper {
  position: static;
}

.bp-page .fb-wrapper {
  position: relative;
  top: 0;
  background: var(--color-white);
  border-bottom: none;
  margin: 0;
}

.bp-filter-divider {
  height: var(--space-px);
  background: var(--color-kpigrey);
  margin: 0 var(--space-lg);
}

.bp-kpi-divider {
  height: var(--space-px);
  background: var(--color-kpigrey);
  margin: 0;
}

.bp-kpi-note {
  text-align: right;
  font-size: var(--font-size-sm);
  color: var(--color-kpiblack);
  font-family: var(--font-family-base);
  padding: 0 var(--space-md);
  padding-top: var(--space-sm);
  margin-bottom: calc(var(--space-sm) * -1);
}

.bp-body {
  flex: 1;
  min-height: 0;
}

.bp-body-content {
  padding: 0 var(--space-lg) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.bp-kpi-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 var(--space-md) var(--space-md);
  padding-bottom: var(--space-xs);
}

.bp-kpi-row::-webkit-scrollbar {
  display: none;
}

.bp-kpi-row .kpi-card {
  min-width: var(--space-35);
  flex: 1 0 var(--space-35);
  scroll-snap-align: start;
}

/* ── Full-width chart section ─────────────────────────────── */
.bp-chart-full {
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  padding: var(--space-xs) var(--space-md) 0;
  gap: var(--space-xs);
}

/* ── Chart header ─────────────────────────────────────────── */
.bp-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.bp-chart-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: 0;
  font-family: var(--font-family-display);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.bp-chart-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-kpiblack);
  margin: var(--space-px) 0 0;
  font-family: var(--font-family-base);
}

/* ── Chart action bar ────────────────────────────────────── */
.bp-chart-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.bp-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
  padding: var(--space-0-8);
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition:
    color var(--motion-duration-fast) ease,
    background var(--motion-duration-fast) ease;
}

.bp-icon-btn:hover {
  color: var(--color-primary);
  background: var(--color-bg-hover-light);
}

/* ── Charts row — grid ───────────────────────────────────── */
.bp-charts-row-wrapper {
  display: flex;
  flex-direction: column;
}

.bp-collapse-header {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-xs) var(--space-md);
}

.bp-collapse-btn {
  background: var(--color-white);
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  width: var(--space-5);
  height: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-primary);
  transition: all var(--motion-duration-fast) ease;
  box-shadow: 0 var(--space-0-5) var(--space-xs) rgba(0, 0, 0, 0.1);
}

.bp-collapse-btn:hover {
  background: var(--color-bg-hover-light);
  border-color: var(--color-primary);
}

.bp-charts-row {
  display: grid;
  grid-template-columns: 2.2fr 3fr;
  gap: 0;
}

.bp-chart-half {
  background: var(--color-white);
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bp-chart-half:first-child {
  border-right: var(--space-px) solid var(--color-kpigrey);
}

.bp-chart-half:first-child .bp-chart-inner {
  padding-right: var(--space-xs);
}

.bp-chart-half:nth-child(2) .bp-chart-inner {
  padding-left: var(--space-md);
}

.bp-chart-half:only-child {
  border-right: none;
}

.bp-chart-inner {
  min-width: var(--space-34);
  padding: var(--space-md) var(--space-md) 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-xs);
}

/* ── Donut stats strip ──────────────────────────────────── */
.bp-donut-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-xs) 0;
  flex-wrap: wrap;
}

.bp-donut-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-0-5);
}

.bp-donut-stat-swatch {
  width: var(--space-sm);
  height: var(--space-sm);
  border-radius: var(--space-0-5);
}

.bp-donut-stat-label {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
}

.bp-donut-stat-value {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
  font-family: var(--font-family-display);
}

/* ── Scroll-to-top button ─────────────────────────────────── */
.bp-scroll-top {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  width: var(--space-10);
  height: var(--space-10);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 var(--space-0-5) var(--space-md) var(--color-shadow-panel);
  transition: background var(--motion-duration-fast) ease;
  z-index: 50;
  font-size: var(--font-size-base);
  line-height: 1;
}

.bp-scroll-top:hover {
  background: var(--color-primary-hover);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1200px) {
  .bp-kpi-row {
    flex-wrap: wrap;
  }
}

/* Below ~600px, flex-wrap's natural reflow depends on each card's own
   min-width vs. the exact remaining space, which can land on 1-per-row
   (a lot of dead space beside each card) as often as 2. Switch to an
   explicit 2-column grid so mobile always gets a predictable 2-and-2
   layout; an odd trailing card spans both columns instead of leaving an
   empty cell beside it. */
@media (max-width: 600px) {
  .bp-kpi-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .bp-kpi-row .kpi-card:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1024px) {
  .bp-charts-row {
    grid-template-columns: 1fr;
  }

  .bp-chart-half:first-child {
    border-right: none;
    border-bottom: var(--space-px) solid var(--color-kpigrey);
  }

  .bp-chart-half:first-child .bp-chart-inner,
  .bp-chart-half:nth-child(2) .bp-chart-inner {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}
.cd-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-backdrop-overlay, rgba(0, 0, 0, 0.4));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.cd-dialog {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 var(--space-xs) var(--space-xxl) var(--color-shadow-modal);
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cd-header {
  padding: var(--space-lg) var(--space-xl) var(--space-sm);
}

.cd-title {
  font-size: var(--font-size-base);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  margin: 0;
  line-height: var(--line-height-snug);
}

.cd-message {
  padding: 0 var(--space-xl) var(--space-lg);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

.cd-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-xl) var(--space-md);
  border-top: var(--space-px) solid var(--color-border);
}

.cd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  padding: 0 var(--space-md);
  height: var(--space-6-5);
  box-sizing: border-box;
  cursor: pointer;
  border: var(--space-px) solid transparent;
  transition:
    background var(--motion-duration-fast) ease,
    opacity var(--motion-duration-fast) ease;
  white-space: nowrap;
  line-height: var(--line-height-none);
}

.cd-btn--cancel {
  background: var(--color-white);
  border-color: var(--color-border);
  color: var(--color-text-body);
}

.cd-btn--cancel:hover {
  border-color: var(--color-text-muted);
}

.cd-btn--confirm {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.cd-btn--confirm:hover {
  opacity: 0.88;
}

.cd-btn--danger {
  background: var(--color-danger);
  color: var(--color-white);
  border-color: var(--color-danger);
}

.cd-btn--danger:hover {
  opacity: 0.88;
}

.cd-btn--mo-primary,
.cd-btn--mo-secondary {
  gap: var(--space-xs);
  border-radius: var(--radius-sm);
  padding: var(--space-1-5) var(--space-5);
  height: auto;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.cd-btn--mo-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
}

.cd-btn--mo-primary:hover {
  background: var(--color-primary-hover);
  opacity: 1;
}

.cd-btn--mo-secondary {
  background: var(--color-white);
  color: var(--color-primary);
  border: var(--space-px) solid var(--color-border-strong);
}

.cd-btn--mo-secondary:hover {
  background: var(--color-bg-hover-light);
  border-color: var(--color-border-strong);
}

/* ─── Simulator variant ─────────────────────────────────────── */
.cd-simulator-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.cd-simulator-modal {
  background: var(--color-white);
  border-radius: var(--radius-md);
  width: 26.25rem;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  box-shadow: 0 var(--space-sm) var(--space-10) rgba(0, 0, 0, 0.18);
}

.cd-simulator-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-5) var(--space-3-5);
}

.cd-simulator-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
}

.cd-simulator-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-xxl);
  height: var(--space-xxl);
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition:
    background var(--motion-duration-fast) ease,
    color var(--motion-duration-fast) ease;
}

.cd-simulator-close:hover {
  background: var(--color-lightgrey);
  color: var(--color-text-body);
}

.cd-simulator-divider {
  height: var(--space-px);
  background: var(--color-kpigrey);
  margin: 0 var(--space-5) var(--space-xs);
  border-radius: var(--space-0-5);
}

.cd-simulator-body {
  padding: var(--space-lg) var(--space-5) var(--space-md);
}

.cd-simulator-text {
  font-size: var(--font-size-lg);
  color: var(--color-text-body);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

.cd-simulator-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2-5);
  padding: var(--space-md) var(--space-5) var(--space-lg);
}
.app-toggle {
  position: relative;
  width: var(--space-1-875);
  height: var(--space-lg);
  border-radius: var(--space-sm);
  border: none;
  background: var(--color-text-placeholder);
  cursor: pointer;
  transition: background var(--motion-duration-fast) ease;
  padding: 0;
  flex-shrink: 0;
}

.app-toggle--on {
  background: var(--color-primary);
}

.app-toggle-thumb {
  position: absolute;
  top: var(--space-0-5);
  left: var(--space-0-5);
  width: var(--space-md);
  height: var(--space-md);
  border-radius: 50%;
  background: var(--color-white);
  transition: transform var(--motion-duration-fast) ease;
  box-shadow: 0 var(--space-px) var(--space-xs) var(--color-shadow-tooltip);
}

.app-toggle--on .app-toggle-thumb {
  transform: translateX(var(--space-3-5));
}

.app-toggle--disabled,
.app-toggle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.md-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
}

/* ── Cards ─────────────────────────────────────────────── */
.md-cards {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-top: var(--space-1-5);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-xl);
}

.md-cards::-webkit-scrollbar {
  display: none;
}

.md-card {
  background: var(--color-white);
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  cursor: pointer;
  transition: all var(--motion-duration-fast) ease;
  font-family: var(--font-family-display);
  text-align: left;
  box-shadow: 0 var(--space-0-5) var(--space-sm) var(--color-shadow-card);
  min-width: var(--space-60);
  flex: 1 0 var(--space-60);
  scroll-snap-align: start;
}

.md-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-card-md);
  transform: translateY(calc(var(--space-0-5) * -1));
}

.md-card--active {
  background: linear-gradient(
    135deg,
    var(--color-bg-card-alt) 0%,
    var(--color-lightblue) 100%
  );
  border-color: var(--color-primary);
  box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-card-md);
}

/* ── Table section ─────────────────────────────────────── */
.md-table-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
  position: relative;
}

.md-table-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-overlay-white, rgba(255, 255, 255, 0.6));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: all;
}

.md-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}

.md-card-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  letter-spacing: 0.05em;
}

.md-card-abbr {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.md-card-value {
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  line-height: var(--line-height-none);
}

/* ── Toolbar ───────────────────────────────────────────── */
.md-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: 0;
  flex-wrap: wrap;
  min-height: var(--space-10);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-bg-card-alt);
  border: var(--space-px) solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.md-search-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1-5) var(--space-md);
  background: var(--color-white);
  min-width: var(--space-40);
  max-width: var(--space-22);
  flex: 1;
  height: var(--space-1-875);
  box-sizing: border-box;
}

.md-search-icon {
  color: var(--color-text-placeholder);
  flex-shrink: 0;
}

.md-search {
  border: none;
  outline: none;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-body);
  background: transparent;
  width: 100%;
}

.md-search::placeholder {
  color: var(--color-text-placeholder);
}

.md-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* ── Edit toggle wrapper ────────────────────────────────── */
.md-edit-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: 0 var(--space-xs);
}

.md-edit-label {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-body);
  font-weight: var(--font-weight-medium);
}

/* ── Buttons ───────────────────────────────────────────── */
.md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  padding: 0 var(--space-sm);
  height: var(--space-6-5);
  box-sizing: border-box;
  cursor: pointer;
  transition:
    background var(--motion-duration-fast) ease,
    color var(--motion-duration-fast) ease,
    border-color var(--motion-duration-fast) ease;
  white-space: nowrap;
  border: var(--space-px) solid transparent;
  line-height: var(--line-height-none);
}

/* Ghost — no border, primary text */
.md-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-primary);
}

.md-btn--ghost:hover {
  opacity: 0.75;
}
.md-btn--ghost:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Outlined — border + primary text */
.md-btn--outline {
  background: var(--color-white);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.md-btn--outline:hover {
  background: var(--color-bg-card-alt);
}

.md-btn--outline.md-btn--active {
  background: var(--color-bg-card-alt);
}

.md-btn--outline:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.md-btn--save {
  background: var(--color-white);
  color: var(--color-text-muted);
  border-color: var(--color-primary);
  padding: var(--space-xs) var(--space-xxl);
  font-weight: var(--font-weight-semibold);
}

.md-btn--save:hover {
  color: var(--color-primary);
}
.md-btn--save:disabled {
  opacity: 0.45;
  border-color: var(--color-primary);
  cursor: not-allowed;
}
.md-btn--save-active {
  color: var(--color-primary);
  opacity: 1;
}

/* ── Table wrapper ─────────────────────────────────────── */
.md-table-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: auto;
}

.md-table-wrap .dt-wrapper {
  flex: 1;
  min-height: 0;
}

.md-table-wrap .dt-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.md-table-wrap .dt-inner-wrap {
  flex: 1;
  min-height: 0;
}

.md-table-wrap .dt-inner-h {
  height: 100%;
  max-height: none;
}

/* ── Edit-mode cell inputs ─────────────────────────────── */
.md-cell-input {
  width: 100%;
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-body);
  outline: none;
  background: var(--color-white);
  min-width: 0;
  height: var(--space-xxl);
  box-sizing: border-box;
}

.md-cell-input:focus {
  border-color: var(--color-primary);
}

/* ── Delete button ─────────────────────────────────────── */
.md-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-danger);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-0-8);
  border-radius: var(--radius-sm);
  transition: background var(--motion-duration-fast) ease;
}

.md-del-btn:hover {
  background: var(--color-danger-bg);
}

.md-del-btn-wrap--disabled {
  cursor: not-allowed;
}

.md-del-btn--disabled {
  opacity: 0.35;
  pointer-events: none;
}

.md-del-tooltip {
  position: fixed;
  background: var(--color-tooltip-bg);
  color: var(--color-tooltip-text);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  max-width: 240px;
  white-space: normal;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-tooltip);
  line-height: 1.5;
}

.md-del-tooltip::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-1-5));
  right: var(--md-arrow-right, 12px);
  left: auto;
  transform: translateX(50%);
  border-left: var(--space-1-5) solid transparent;
  border-right: var(--space-1-5) solid transparent;
  border-bottom: var(--space-1-5) solid var(--color-tooltip-bg);
}

.md-del-tooltip--above::before {
  top: auto;
  bottom: calc(-1 * var(--space-1-5));
  right: var(--md-arrow-right, 12px);
  left: auto;
  transform: translateX(50%);
  border-bottom: none;
  border-top: var(--space-1-5) solid var(--color-tooltip-bg);
}

.md-del-tooltip--centered {
  white-space: nowrap;
}

.md-del-tooltip--centered::before {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.md-del-tooltip--above.md-del-tooltip--centered::before {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* ── Required field star ───────────────────────────────── */
.md-required-star {
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  line-height: 1;
  margin-left: var(--space-px);
  font-weight: var(--font-weight-bold);
}

/* ── Save footer ───────────────────────────────────────── */
.md-save-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  flex-wrap: wrap;
}
/* ─── Multi-select / single-select cell ─────────────────── */
.um-multisel {
  /* Checkbox geometry — sub-pixel values with no clean token equivalent */
  --tc-chk-border: 0.09375rem;  /* 1.5px border */
  --tc-check-left: 0.175rem;
  --tc-check-top: 0.025rem;
  --tc-check-w: 0.3rem;

  position: relative;
  width: 100%;
}

.um-multisel-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  width: 100%;
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-body);
  background: var(--color-white);
  cursor: pointer;
  text-align: left;
  min-width: 0;
  height: var(--space-xxl);
  box-sizing: border-box;
}

.um-multisel-trigger:focus {
  outline: none;
  border-color: var(--color-primary);
}
.um-multisel-trigger--open {
  border-color: var(--color-primary);
}

.um-multisel-val {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.um-sel-placeholder {
  color: var(--color-text-placeholder);
}

.um-multisel-dropdown {
  z-index: 9999;
  background: var(--color-cell-dropdown-bg);
  border: var(--space-px) solid var(--color-cell-dropdown-border);
  border-radius: var(--space-1-5);
  box-shadow: 0 var(--space-0-5) var(--space-1-5) var(--color-shadow-popover);
  min-width: 100%;
  max-height: var(--space-16);
  overflow-y: auto;
  padding: var(--space-xs) 0;
}

.um-multisel-option {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-sm) var(--space-2-5);
  font-size: var(--font-size-sm);
  color: var(--color-cell-dropdown-text);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  font-weight: var(--font-weight-regular);
}

.um-multisel-option:hover {
  background: var(--color-cell-dropdown-hover-bg);
}

.um-sel-option {
  cursor: pointer;
}

.um-sel-option--selected {
  background: var(--color-cell-dropdown-hover-bg);
  color: var(--color-cell-dropdown-text);
  font-weight: var(--font-weight-medium);
}

/* Custom checkbox */
.um-multisel-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: var(--space-3-5);
  height: var(--space-3-5);
  border: var(--tc-chk-border) solid var(--color-cell-checkbox-color);
  border-radius: var(--space-xs);
  background: var(--color-white);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background var(--motion-duration-fast) ease;
}

.um-multisel-option input[type="checkbox"]:checked {
  background: var(--color-cell-checkbox-color);
  border-color: var(--color-cell-checkbox-color);
}

.um-multisel-option input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: var(--tc-check-left);
  top: var(--tc-check-top);
  width: var(--tc-check-w);
  height: var(--space-sm);
  border: var(--tc-chk-border) solid var(--color-white);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.um-page {
  height: 100vh;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ─── Body ──────────────────────────────────────────────── */
.um-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-12) var(--space-lg) var(--space-10);
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

/* ─── Sub-tabs ──────────────────────────────────────────── */
.um-subtabs {
  display: flex;
  gap: 0;
  border-bottom: var(--space-px) solid var(--color-border);
  margin-bottom: var(--space-md);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}

.um-subtabs::-webkit-scrollbar {
  display: none;
}

.um-subtab {
  background: none;
  border: none;
  border-bottom: var(--space-0-1875) solid transparent;
  padding: var(--space-2-5) var(--space-xl);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  transition:
    color var(--motion-duration-fast) ease,
    border-color var(--motion-duration-fast) ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.um-subtab:hover {
  color: var(--color-primary);
}

.um-subtab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* ─── Toolbar ───────────────────────────────────────────── */
.um-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: 0;
  flex-wrap: wrap;
  min-height: var(--space-10);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-bg-card-alt);
  border: var(--space-px) solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.um-search-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1-5) var(--space-md);
  background: var(--color-white);
  min-width: var(--space-40);
  max-width: var(--space-22);
  flex: 1;
  height: var(--space-1-875);
  box-sizing: border-box;
}

.um-search-icon {
  color: var(--color-text-placeholder);
  flex-shrink: 0;
}

.um-search {
  border: none;
  outline: none;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-body);
  background: transparent;
  width: 100%;
}

.um-search::placeholder {
  color: var(--color-text-placeholder);
}

.um-search-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-placeholder);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-none);
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-lg);
  height: var(--space-lg);
  border-radius: var(--radius-sm);
  transition: color var(--motion-duration-fast) ease;
}

.um-search-clear:hover {
  color: var(--color-text-body);
}

.um-required-star {
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  line-height: 1;
  margin-left: var(--space-px);
  font-weight: var(--font-weight-bold);
}

.um-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ─── Edit toggle wrapper ───────────────────────────────── */
.um-edit-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: 0 var(--space-xs);
}

.um-edit-label {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-body);
  font-weight: var(--font-weight-medium);
}

/* ─── Buttons ───────────────────────────────────────────── */
.um-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  padding: 0 var(--space-sm);
  height: var(--space-6-5);
  box-sizing: border-box;
  cursor: pointer;
  transition:
    background var(--motion-duration-fast) ease,
    color var(--motion-duration-fast) ease,
    border-color var(--motion-duration-fast) ease;
  white-space: nowrap;
  border: var(--space-px) solid transparent;
  line-height: var(--line-height-none);
}

.um-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-primary);
}

.um-btn--ghost:hover {
  opacity: 0.75;
}
.um-btn--ghost:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.um-btn--outline {
  background: var(--color-white);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.um-btn--outline:hover {
  background: var(--color-bg-card-alt);
}

.um-btn--outline.um-btn--active {
  background: var(--color-bg-card-alt);
}

.um-btn--outline:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.um-btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.um-btn--primary:hover {
  opacity: 0.88;
}

.um-btn--primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.um-btn--icon {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-body);
  padding: var(--space-xs) var(--space-xs);
}

.um-btn--icon:hover {
  color: var(--color-primary);
}

.um-btn--save {
  background: var(--color-white);
  color: var(--color-text-muted);
  border-color: var(--color-primary);
  padding: var(--space-xs) var(--space-xxl);
  font-weight: var(--font-weight-semibold);
}

.um-btn--save:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.um-btn--save-active {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.um-btn--save:disabled {
  opacity: 0.5;
  border-color: var(--color-primary);
  cursor: not-allowed;
}

/* ─── Table wrapper ─────────────────────────────────────── */
.um-table-wrap {
  margin-bottom: var(--space-md);
}

/* ─── Edit-mode cell inputs ─────────────────────────────── */
.um-cell-input {
  width: 100%;
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-body);
  outline: none;
  background: var(--color-white);
  min-width: 0;
  height: var(--space-xxl);
  box-sizing: border-box;
}

.um-cell-input:focus {
  border-color: var(--color-primary);
}

/* ─── Table save overlay ────────────────────────────────── */
.um-table-wrap--relative {
  position: relative;
}

.um-table-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-overlay-white, rgba(255, 255, 255, 0.6));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: all;
}

.um-table-spinner {
  display: inline-block;
  width: var(--space-7);
  height: var(--space-7);
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: um-spin 0.7s linear infinite;
}

@keyframes um-spin {
  to { transform: rotate(360deg); }
}

/* ─── Delete button ─────────────────────────────────────── */
.um-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-danger);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-0-8);
  border-radius: var(--radius-sm);
  transition: background var(--motion-duration-fast) ease;
}

.um-del-btn:hover {
  background: var(--color-danger-bg);
}

.um-del-tooltip {
  position: fixed;
  background: var(--color-tooltip-bg);
  color: var(--color-tooltip-text);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  white-space: normal;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-tooltip);
  line-height: 1.5;
}

.um-del-tooltip::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-1-5));
  left: var(--um-arrow-left, 50%);
  transform: translateX(-50%);
  border-left: var(--space-1-5) solid transparent;
  border-right: var(--space-1-5) solid transparent;
  border-bottom: var(--space-1-5) solid var(--color-tooltip-bg);
}

.um-del-tooltip--above::before {
  top: auto;
  bottom: calc(-1 * var(--space-1-5));
  border-bottom: none;
  border-top: var(--space-1-5) solid var(--color-tooltip-bg);
}

/* ─── Save footer ───────────────────────────────────────── */
.um-save-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-sm);
}

/* ─── Placeholder tab ───────────────────────────────────── */
.um-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  padding: var(--space-4) 0;
}

.um-placeholder span {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-right: var(--space-1-5);
}

/* ─── Access denied ─────────────────────────────────────── */
.um-access-denied {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-4) var(--space-xxl);
  text-align: center;
}

.um-access-denied-icon {
  opacity: 0.5;
  flex-shrink: 0;
}

.um-access-denied-title {
  font-size: var(--font-size-xl);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  margin: 0;
}

.um-access-denied-desc {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-muted);
  margin: 0;
  max-width: var(--space-28);
  line-height: var(--line-height-relaxed);
}

.um-access-denied-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  background: none;
  border: var(--space-px) solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--motion-duration-fast) ease;
  margin-top: var(--space-xs);
}

.um-access-denied-back:hover {
  background: var(--color-bg-card-alt);
}

/* ─── Capabilities badge (Users tab) ────────────────────── */
.um-cap-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-5) var(--space-sm);
  background: var(--color-bg-hover-light);
  border: var(--space-px) solid var(--color-chip-view-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-chip-view-text);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   BULK UPLOAD MODAL
═══════════════════════════════════════════════════════════ */

.bum-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-backdrop-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.bum-modal {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 var(--space-0-5) var(--space-xxl) var(--color-shadow-modal);
  width: min(var(--space-48), 92vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bum-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: var(--space-px) solid var(--color-border);
  flex-shrink: 0;
}

.bum-title {
  font-size: var(--font-size-lg);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
}

.bum-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  transition: color var(--motion-duration-fast) ease;
}

.bum-close:hover {
  color: var(--color-text-body);
}

.bum-close-icon,
.bum-download-icon {
  display: block;
  width: var(--space-lg);
  height: var(--space-lg);
  flex-shrink: 0;
}

.bum-body {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.bum-template-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-lg);
  text-decoration: none;
  transition: opacity var(--motion-duration-fast) ease;
  width: 100%;
  box-sizing: border-box;
}

.bum-template-btn:hover {
  opacity: 0.88;
}

.bum-dropzone {
  border: var(--space-0-5) dashed var(--color-border);
  border-radius: var(--radius-md);
  min-height: var(--space-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  cursor: pointer;
  transition:
    border-color var(--motion-duration-fast) ease,
    background var(--motion-duration-fast) ease;
  padding: var(--space-xl);
  text-align: center;
  box-sizing: border-box;
  position: relative;
}

.bum-dropzone:hover,
.bum-dropzone--drag {
  border-color: var(--color-primary);
  background: var(--color-lightblue);
}

.bum-dropzone--has-file {
  border-color: var(--color-primary);
}

.bum-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: none;
}

.bum-dropzone-icon {
  color: var(--color-primary);
  opacity: 0.7;
}

.bum-dropzone-text {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.bum-dropzone-link {
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
}

.bum-dropzone-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-placeholder);
}

.bum-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-height: var(--space-6-0);
}

.bum-results-summary {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.bum-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
}

.bum-pill--ok {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.bum-pill--fail {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.bum-error-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-height: var(--space-12-0);
  overflow-y: auto;
}

.bum-error-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-base);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-danger-bg);
  border-radius: var(--radius-sm);
}

.bum-error-row {
  color: var(--color-text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.bum-error-email {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-body);
  flex-shrink: 0;
}

.bum-error-msg {
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bum-error-group {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.bum-error-group:last-child {
  border-bottom: none;
}

.bum-error-group-hd {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.bum-error-group-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.bum-error-sublist {
  list-style: none;
  padding: 0 0 0 var(--space-md);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bum-file-error {
  margin: 0;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-danger);
  text-align: center;
}

.bum-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-xl);
  border-top: var(--space-px) solid var(--color-border);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   USER ROLE TAB
═══════════════════════════════════════════════════════════ */

.ur-saving-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-overlay-white, rgba(255, 255, 255, 0.6));
  pointer-events: all;
  z-index: 10;
}

.ur-layout {
  display: flex;
  flex: 1;
  position: relative;
  gap: 0;
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

.ur-sidebar {
  width: clamp(var(--space-9), 18%, var(--space-56));
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: var(--space-px) solid var(--color-border);
  background: var(--color-lightgrey);
  min-width: 0;
  overflow: visible;
}

.ur-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--space-px) solid var(--color-border);
  flex-shrink: 0;
  min-width: 0;
  overflow: hidden;
}

.ur-sidebar-title {
  font-size: var(--font-size-base);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ur-new-btn {
  font-size: var(--font-size-sm) !important;
  padding: 0 var(--space-sm) !important;
  height: var(--space-7) !important;
  flex-shrink: 0;
}

.ur-sidebar-search {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border-bottom: var(--space-px) solid var(--color-border);
  color: var(--color-text-placeholder);
  flex-shrink: 0;
  height: var(--space-2-25);
  min-width: 0;
  overflow: hidden;
}

.ur-sidebar-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-body);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ur-sidebar-search-input::placeholder {
  color: var(--color-text-placeholder);
}

.ur-role-scroll {
  flex: 1;
  min-height: 0;
}

.ur-role-list {
  list-style: none;
  padding: var(--space-xs) 0;
}

.ur-role-empty {
  text-align: center;
  padding: var(--space-xl) var(--space-sm);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-muted);
}

.ur-role-list-item {
  display: flex;
  align-items: stretch;
  position: relative;
}

.ur-role-del-btn {
  flex-shrink: 0;
  align-self: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-danger);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  margin-right: var(--space-sm);
  border-radius: var(--radius-sm);
  transition: background var(--motion-duration-fast) ease;
}

.ur-role-del-btn:hover {
  background: var(--color-danger-bg);
}
.ur-role-del-btn:disabled {
  opacity: 0.3;
  pointer-events: none;
}

.ur-role-del-wrap {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  align-self: center;
}

.ur-role-del-wrap--disabled {
  cursor: not-allowed;
}

.ur-role-list-item .ur-role-item {
  flex: 1;
  min-width: 0;
}

.ur-role-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  background: none;
  border: none;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  transition: background var(--motion-duration-fast) ease;
  gap: var(--space-sm);
}

.ur-role-item:hover {
  background: var(--color-bg-hover-light);
}
.ur-role-item--active {
  background: var(--color-lightblue);
}
.ur-role-item--active:hover {
  background: var(--color-lightblue);
}

.ur-role-item-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.ur-role-item-name {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ur-role-item-desc {
  margin-top: var(--space-px);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--line-height-normal);
}

.ur-role-item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-px);
  flex-shrink: 0;
  min-width: var(--space-4);
}

.ur-role-item-caps,
.ur-role-item-users {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.ur-tag-system {
  font-size: var(--font-size-xs);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-px) var(--space-xs);
  flex-shrink: 0;
}

.ur-dot-dirty {
  display: inline-block;
  width: var(--space-0-45);
  height: var(--space-0-45);
  border-radius: var(--radius-full);
  background: var(--color-error);
  flex-shrink: 0;
}

/* ── Editor ──────────────────────────────────────────────── */
.ur-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--color-white);
}

.ur-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  border-bottom: var(--space-px) solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-bg-card-alt);
  overflow: hidden;
  min-width: 0;
}

.ur-editor-head-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.ur-editor-eyebrow {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-eyebrow);
}

.ur-editor-name {
  font-size: clamp(var(--font-size-lg), 2.5vw, var(--font-size-2xl));
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  padding: 0;
  line-height: var(--line-height-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ur-editor-name:disabled {
  cursor: default;
  opacity: 0.85;
}
.ur-editor-name:not(:disabled):focus {
  border-bottom: var(--space-0-5) solid var(--color-primary);
}

.ur-editor-desc {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  color: var(--color-text-muted);
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  padding: 0;
  line-height: var(--line-height-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ur-editor-desc:focus {
  border-bottom: var(--space-px) solid var(--color-input-border);
}
.ur-editor-desc::placeholder {
  color: var(--color-text-placeholder);
}

.ur-editor-stats {
  display: flex;
  gap: var(--space-lg);
  flex-shrink: 0;
  align-items: center;
  overflow: hidden;
}

.ur-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  min-width: var(--space-3-5rem);
}

.ur-stat-num {
  font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-4xl));
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: var(--line-height-none);
}

.ur-stat-num--dirty {
  color: var(--color-error);
}

.ur-stat-lbl {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-muted);
  white-space: nowrap;
  text-align: center;
}

.ur-cap-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-xl);
  border-bottom: var(--space-px) solid var(--color-border);
  flex-shrink: 0;
  min-height: var(--space-11);
  flex-wrap: wrap;
}

.ur-cap-search {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-white);
  max-width: var(--space-24);
  flex: 1;
  color: var(--color-text-placeholder);
  height: var(--space-2);
}

.ur-cap-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-body);
  min-width: 0;
}

.ur-cap-search-input::placeholder {
  color: var(--color-text-placeholder);
}

.ur-cap-search-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-none);
  padding: 0;
  flex-shrink: 0;
}

.ur-cap-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.ur-link-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-primary);
  text-decoration: underline;
  padding: 0;
}

.ur-link-btn:hover {
  opacity: 0.75;
}

.ur-dot-sep {
  color: var(--color-text-placeholder);
  font-size: var(--font-size-base);
  user-select: none;
}

.ur-cap-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  max-height: none;
  overscroll-behavior: contain;
  background: var(--color-lightgrey);
  scrollbar-width: none;
}

.ur-cap-list::-webkit-scrollbar {
  display: none;
}

.ur-cap-empty {
  text-align: center;
  padding: var(--space-xxl);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  color: var(--color-text-muted);
}

.ur-feature {
  border-bottom: var(--space-px) solid var(--color-border);
  background: var(--color-white);
}

.ur-feature-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
  background: var(--color-white);
  transition: background var(--motion-duration-fast) ease;
  min-height: var(--space-11);
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.ur-feature-head:hover {
  background: var(--color-bg-hover-light);
}

.ur-feature-disclose {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: transform var(--motion-duration-fast) ease;
}

.ur-feature--open .ur-feature-disclose svg {
  transform: rotate(0deg);
}
.ur-feature:not(.ur-feature--open) .ur-feature-disclose svg {
  transform: rotate(-90deg);
}

.ur-feature-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.ur-feature-title {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  margin: 0;
  line-height: var(--line-height-snug);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ur-feature-desc {
  font-size: var(--font-size-xs);
  font-family: var(--font-family-base);
  color: var(--color-text-muted);
  margin: var(--space-px) 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--line-height-normal);
}

.ur-feature-meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
  overflow: hidden;
}

.ur-screen-status {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.4;
}
.ur-screen-status--on {
  background: #e6f4ea;
  color: #1e7e34;
}
.ur-screen-status--off {
  background: #f1f1f3;
  color: #8a8a93;
}

.ur-feature-count {
  font-size: var(--font-size-xs);
  font-family: var(--font-family-base);
  color: var(--color-text-body);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.ur-feature-count-total {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

.ur-badge-dirty {
  font-size: var(--font-size-xs);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  background: var(--color-warning-bg-tint);
  color: var(--color-error);
  border-radius: var(--radius-sm);
  padding: var(--space-px) var(--space-xs);
  white-space: nowrap;
}

.ur-bulk-btn {
  background: var(--color-white);
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color var(--motion-duration-fast) ease,
    color var(--motion-duration-fast) ease;
}

.ur-bulk-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.ur-bulk-btn--on {
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.ur-bulk-btn--mixed {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.ur-feature-body {
  background: var(--color-white);
  padding: var(--space-xs) 0 var(--space-md);
}

.ur-subrow {
  display: block;
  padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-10);
  min-height: 0;
  overflow: visible;
}

.ur-subrow + .ur-subrow {
  border-top: none;
  margin-top: var(--space-sm);
}

.ur-subrow-name {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: clamp(var(--space-6-0), 20%, var(--space-11-0));
  flex-shrink: 0;
  min-width: 0;
  overflow: hidden;
}

.ur-subrow-tri {
  display: none;
}

.ur-subrow-label {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--line-height-normal);
  min-width: 0;
}

.ur-subrow-count {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-placeholder);
  white-space: nowrap;
  flex-shrink: 0;
}

.ur-subrow-actions {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.ur-cap-tree {
  display: block;
  width: 100%;
  min-width: 0;
}

.ur-cap-node-row {
  display: grid;
  grid-template-columns: minmax(var(--space-12-0), 1fr) auto;
  align-items: center;
  gap: var(--space-lg);
  min-height: var(--space-2-35);
  min-width: 0;
  position: relative;
}

.ur-cap-node-main,
.ur-cap-node-actions {
  display: flex;
  align-items: center;
  min-width: 0;
}

.ur-cap-node-main {
  gap: var(--space-sm);
}

.ur-cap-node-actions {
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ur-cap-node-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-lg);
  height: var(--space-lg);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.ur-cap-node-toggle:disabled {
  cursor: default;
  opacity: 0;
}

.ur-cap-node-chevron {
  display: block;
  width: var(--space-2-5);
  height: var(--space-2-5);
  transform: rotate(0deg);
  transition: transform var(--motion-duration-fast) ease;
}

.ur-cap-tree--closed > .ur-cap-node-row .ur-cap-node-chevron {
  transform: rotate(-90deg);
}

.ur-cap-node-label {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ur-cap-node-row--child .ur-cap-node-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.ur-cap-node-count {
  border-radius: var(--radius-full);
  background: var(--color-bg-card-alt);
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-none);
  padding: var(--space-px) var(--space-xs);
  white-space: nowrap;
}

.ur-cap-tree-children {
  margin-left: var(--space-sm);
  padding-left: var(--space-2-25);
  padding-top: var(--space-sm);
  position: relative;
  transition:
    opacity var(--motion-duration-fast) ease,
    max-height var(--motion-duration-fast) ease;
}

.ur-cap-tree--closed > .ur-cap-tree-children {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
}

.ur-cap-tree--open > .ur-cap-tree-children {
  max-height: 2000px;
  opacity: 1;
}

.ur-cap-tree-children::before {
  content: "";
  position: absolute;
  left: var(--space-sm);
  top: 0;
  bottom: var(--space-1-2rem);
  width: var(--space-px);
  background: var(--color-border);
}

.ur-cap-tree-branch {
  position: relative;
}

.ur-cap-node-row--child::before {
  content: "";
  position: absolute;
  left: calc(var(--space-7) * -1);
  top: 50%;
  width: var(--space-5);
  height: var(--space-px);
  background: var(--color-border);
}

.ur-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  border-radius: var(--radius-md);
  border: var(--space-px) solid var(--color-border);
  padding: var(--space-px) var(--space-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition:
    opacity var(--motion-duration-fast) ease,
    border-color var(--motion-duration-fast) ease;
  white-space: nowrap;
  line-height: var(--line-height-none);
  user-select: none;
  min-height: var(--space-7);
}

.ur-chip--locked {
  cursor: default;
  opacity: 0.65;
}
.ur-chip--readonly {
  cursor: not-allowed;
  opacity: 0.55;
}

.ur-chip-dot {
  width: var(--space-0-35);
  height: var(--space-0-35);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.ur-chip-lock {
  font-size: var(--font-size-xs);
  opacity: 0.6;
}

.ur-chip--off {
  background: var(--color-white);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.ur-chip--off .ur-chip-dot {
  background: var(--color-text-placeholder);
}
.ur-chip--off:hover:not(.ur-chip--locked) {
  border-color: var(--color-input-border);
  color: var(--color-text-body);
}

.ur-chip--view.ur-chip--on {
  background: var(--color-white);
  border-color: var(--color-chip-view-border);
  color: var(--color-chip-view-text);
}
.ur-chip--view.ur-chip--on .ur-chip-dot {
  background: var(--color-chip-view-text);
}

.ur-chip--edit.ur-chip--on {
  background: var(--color-white);
  border-color: var(--color-warning-border);
  color: var(--color-warning);
}
.ur-chip--edit.ur-chip--on .ur-chip-dot {
  background: var(--color-warning);
}

.ur-chip--interact.ur-chip--on {
  background: var(--color-white);
  border-color: var(--color-chip-interact-border);
  color: var(--color-chip-interact-text);
}
.ur-chip--interact.ur-chip--on .ur-chip-dot {
  background: var(--color-chip-interact-text);
}

.ur-chip--action.ur-chip--on {
  background: var(--color-white);
  border-color: var(--color-chip-action-border);
  color: var(--color-chip-action-text);
}
.ur-chip--action.ur-chip--on .ur-chip-dot {
  background: var(--color-chip-action-text);
}

.ur-chip-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.ur-chip-key {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-lightgrey);
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-px) var(--space-xs);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-wide);
}

.ur-chip-wrap--dirty .ur-chip {
  outline: var(--space-px) dashed var(--color-error);
  outline-offset: var(--space-0-4);
}

.ur-chip-status {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: var(--space-0-4) var(--space-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: help;
}

.ur-chip-status--deprecated {
  background: var(--color-chip-deprecated-bg);
  color: var(--color-chip-deprecated-text);
}

.ur-chip-status--removed {
  background: var(--color-chip-removed-bg);
  color: var(--color-chip-removed-text);
  text-decoration: line-through;
}

.ur-chip--deprecated {
  opacity: 0.85;
}

/* ── Editor footer ───────────────────────────────────────── */
.ur-editor-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-xl);
  border-top: var(--space-px) solid var(--color-border);
  background: var(--color-white);
  flex-shrink: 0;
  gap: var(--space-md);
  transition: background var(--motion-duration-fast) ease;
  min-height: var(--space-12);
}

.ur-editor-foot--dirty {
  background: var(--color-warning-bg);
  border-top-color: var(--color-warning-border);
}

.ur-foot-status {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-body);
  line-height: var(--line-height-normal);
}

.ur-foot-saved {
  color: var(--color-text-muted);
}
.ur-foot-readonly {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-style: italic;
}

.ur-foot-error {
  color: var(--color-danger);
  font-size: var(--font-size-xs);
}

.ur-foot-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* ─── Editable wrap ─────────────────────────────────────── */
.ur-editable-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
}


.ur-edit-hint {
  opacity: 1;
  margin-left: var(--space-xs);
  color: var(--color-text-placeholder);
  flex-shrink: 0;
}

.ur-edit-hint-icon {
  display: block;
  width: var(--space-md);
  height: var(--space-md);
  flex-shrink: 0;
}

.ur-input-mirror {
  position: absolute;
  visibility: hidden;
  white-space: pre;
  pointer-events: none;
}

.ur-input-mirror--name {
  font-size: clamp(var(--font-size-lg), 2.5vw, var(--font-size-2xl));
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
}

.ur-input-mirror--desc {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
}

/* ─── Desc / delete tooltip ─────────────────────────────── */
.ur-desc-tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--color-tooltip-bg);
  color: var(--color-tooltip-text);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  pointer-events: none;
  max-width: 240px;
  white-space: normal;
  line-height: 1.5;
  box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-tooltip);
}

.ur-desc-tooltip::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-1-5));
  left: var(--ur-arrow-left, 50%);
  transform: translateX(-50%);
  border-left: var(--space-1-5) solid transparent;
  border-right: var(--space-1-5) solid transparent;
  border-bottom: var(--space-1-5) solid var(--color-tooltip-bg);
}

.ur-desc-tooltip--above::before {
  top: auto;
  bottom: calc(-1 * var(--space-1-5));
  border-bottom: none;
  border-top: var(--space-1-5) solid var(--color-tooltip-bg);
}

/* ═══════════════════════════════════════════════════════════
   CAPABILITIES CATALOG TAB
═══════════════════════════════════════════════════════════ */

.uc-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  min-height: 0;
}

.uc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xl);
  padding: var(--space-lg) 0 var(--space-md);
  flex-wrap: wrap;
}

.uc-header-left {
  flex: 1;
  min-width: 0;
}

.uc-title {
  font-size: var(--font-size-3xl);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0 0 var(--space-xs);
  line-height: var(--line-height-tight);
}

.uc-subtitle {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

.uc-header-stats {
  display: flex;
  gap: var(--space-xl);
  flex-shrink: 0;
  align-items: center;
  flex-wrap: wrap;
}

.uc-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0 0 var(--space-md);
  border-bottom: var(--space-px) solid var(--color-border);
  flex-wrap: wrap;
}

.uc-search {
  max-width: var(--space-28) !important;
  flex: 1;
}

.uc-result-count {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.uc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--space-22), 1fr));
  gap: var(--space-lg);
  padding: var(--space-lg) 0 var(--space-10);
  overflow: visible;
  max-height: none;
}

/* Ensure CustomScrollbar controls scrolling for capabilities catalog */
.uc-custom-scrollbar {
  height: auto;
  max-height: calc(100vh - var(--space-20-0));
}

.uc-card {
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.uc-card-head {
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-card-alt);
  border-bottom: var(--space-px) solid var(--color-border);
}

.uc-card-head-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.uc-card-title {
  font-size: var(--font-size-base);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: 0;
  line-height: var(--line-height-snug);
}

.uc-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-xl);
  height: var(--space-xl);
  padding: 0 var(--space-xs);
  background: var(--color-lightblue);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  flex-shrink: 0;
}

.uc-card-desc {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--line-height-normal);
}

.uc-card-body {
  flex: 1;
  padding: var(--space-sm) 0;
}

.uc-sub {
  padding: 0 var(--space-lg) var(--space-sm);
}

.uc-sub:not(:first-child) {
  border-top: var(--space-px) solid var(--color-border);
  padding-top: var(--space-sm);
  margin-top: var(--space-xs);
}

.uc-sub-label {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  margin-bottom: var(--space-xs);
  line-height: var(--line-height-snug);
}

.uc-tree-node {
  margin-top: var(--space-xs);
  padding-left: var(--space-md);
  border-left: var(--space-px) solid var(--color-border);
}

.uc-tree-label {
  font-size: var(--font-size-xs);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  line-height: var(--line-height-snug);
  margin-bottom: var(--space-xs);
}

.uc-tree-actions {
  min-width: 0;
}

.uc-action-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-bottom: var(--space-px) solid var(--color-bg-card-alt);
}

.uc-action-row:last-child {
  border-bottom: none;
}

.uc-action-label {
  flex: 1;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-text-body);
  line-height: var(--line-height-normal);
  min-width: 0;
}

.uc-action-key {
  font-size: var(--font-size-xs);
  font-family: var(--font-family-mono);
  color: var(--color-text-muted);
  background: var(--color-lightgrey);
  border-radius: var(--radius-sm);
  padding: var(--space-px) var(--space-xs);
  white-space: nowrap;
  flex-shrink: 0;
  max-width: var(--space-12-0);
  overflow: hidden;
  text-overflow: ellipsis;
}

.uc-implies {
  font-size: var(--font-size-xs);
  font-family: var(--font-family-base);
  color: var(--color-text-placeholder);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: help;
}

.uc-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-xxl);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  color: var(--color-text-muted);
}

/* NOTE: CSS media features can't reference custom properties (var(--space-48)
   is not a valid media condition and this query never matched in any
   browser) — pinned to the literal px value the token resolves to (48rem). */
@media (max-width: 48rem) {
  .ur-cap-node-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .ur-cap-node-actions {
    justify-content: flex-start;
    padding-left: var(--space-2-2);
  }
}

/* ── Responsive: two-pane role editor ─────────────────────
   Sidebar + editor sit side by side (.ur-layout, display:flex) sized for
   desktop. Stack them on narrower viewports instead of squeezing both
   panes past readability. */
@media (max-width: 48rem) {
  .ur-layout {
    flex-direction: column;
  }

  .ur-sidebar {
    width: 100%;
    max-height: 40vh;
    border-right: none;
    border-bottom: var(--space-px) solid var(--color-border);
  }

  .ur-editor {
    min-height: 50vh;
  }
}

/* ── Responsive: toolbar search width ──────────────────────
   Fixed max-width kept the search box needlessly narrow once the
   toolbar has already wrapped onto its own line on small screens. */
@media (max-width: 40rem) {
  .um-search-wrap {
    max-width: none;
    width: 100%;
  }
}
.hs-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  border: var(--space-px) solid var(--color-kpigrey);
  border-radius: var(--radius-sm);
  width: fit-content;
  min-width: var(--hs-min-w, var(--space-60));
  max-width: var(--hs-max-w, none);
}

.hs-label {
  position: absolute;
  top: calc(var(--space-px) * -8);
  left: var(--space-md);
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  background: var(--color-white);
  padding: 0 var(--space-0-8);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  max-width: calc(100% - var(--space-md));
  overflow: visible;
}

/* ── Trigger ─────────────────────────────────────────────── */
.hs-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-display);
  color: var(--color-black);
  min-width: var(--space-8);
  text-align: left;
  width: 100%;
  transition: border-color var(--motion-duration-fast) ease;
}

.hs-trigger--open,
.hs-trigger:hover {
  border-color: var(--color-primary);
}

.hs-trigger-label {
  display: none;
}

.hs-trigger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-width: 0;
  width: 100%;
}

.hs-trigger-value {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-display);
  color: var(--color-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.hs-trigger-chevron {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform var(--motion-duration-fast) ease;
}

.hs-trigger-chevron--open {
  transform: rotate(180deg);
}

/* ── Dropdown panel ──────────────────────────────────────── */
/* Rendered through a portal to document.body (see useDropdownPosition) so it
   can't be visually clipped by an ancestor with overflow:hidden (e.g. a
   chart card) — position/top/bottom/right/min-width are all set inline per
   instance from the hook's fixed-viewport-coordinate calculation. */
.hs-dropdown {
  width: max-content;
  max-width: var(--space-105); /* 26.25rem = 420px */
  background: var(--color-white);
  border: var(--space-px) solid var(--color-kpigrey);
  border-radius: var(--radius-sm);
  box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-dropdown);
  z-index: 9999;
  overflow: hidden;
}

/* ── Search ──────────────────────────────────────────────── */
.hs-search-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-sm);
  border-bottom: var(--space-px) solid var(--color-border);
  background: var(--color-white);
}

.hs-search-icon {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.hs-search {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-display);
  color: var(--color-text-body);
  background: transparent;
  min-width: 0;
}

.hs-search::placeholder {
  color: var(--color-text-muted);
}

.hs-search-clear {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  line-height: var(--line-height-none);
  padding: 0 var(--space-0-5);
  display: flex;
  align-items: center;
}

.hs-search-clear:hover {
  color: var(--color-text-body);
}

/* ── Match highlight ─────────────────────────────────────── */
.hs-highlight {
  background: var(--color-subtleblue);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--space-0-5);
  padding: 0 var(--space-px);
}

/* ── Tree scroll area padding ────────────────────────────── */
.hs-dropdown .dsl-list {
  padding: var(--space-0-5) 0;
}

/* ── No results ──────────────────────────────────────────── */
.hs-no-results {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin: 0;
}

/* ── Group header ────────────────────────────────────────── */
.hs-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  padding-left: calc(var(--space-sm) + var(--hs-depth, 0) * var(--space-3-5));
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-display);
  color: var(--color-violet);
  font-weight: var(--font-weight-medium);
  transition: background var(--motion-duration-fast) ease;
}

.hs-group-header:hover {
  background: var(--color-lightgrey);
}

.hs-group-chevron {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  transition: transform var(--motion-duration-fast) ease;
  flex-shrink: 0;
}

.hs-group-chevron--open {
  transform: rotate(90deg);
}

/* ── Icon sizes ──────────────────────────────────────────── */
.hs-search-icon-svg {
  display: block;
  width: var(--space-3-25);  /* 0.8125rem = 13px */
  height: var(--space-3-25);
  flex-shrink: 0;
}

.hs-chevron-right {
  display: block;
  width: var(--space-2-5);   /* 0.625rem = 10px */
  height: var(--space-2-5);
}

.hs-trigger-chevron-icon {
  display: block;
  width: var(--space-sm);    /* 0.5rem = 8px */
  height: var(--space-1-5);  /* 0.375rem = 6px */
  flex-shrink: 0;
}

/* ── Leaf item ───────────────────────────────────────────── */
.hs-leaf {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  padding-left: calc(var(--space-sm) + var(--space-3-5) + var(--hs-depth, 0) * var(--space-3-5));
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-display);
  color: var(--color-violet);
  transition: background var(--motion-duration-fast) ease;
}

.hs-leaf:hover {
  background: var(--color-lightgrey);
}

/* ── Briefly highlight the selected option when the dropdown opens ─ */
@keyframes hs-leaf-pulse {
  0% {
    background: var(--color-subtleblue);
  }
  100% {
    background: transparent;
  }
}

.hs-leaf--pulse {
  animation: hs-leaf-pulse 0.9s ease-out;
}

/* ── Radio indicator ─────────────────────────────────────── */
.hs-radio {
  --hs-radio-size: var(--space-3-25); /* 0.8125rem = 13px */
  --hs-radio-border: 0.09375rem; /* 1.5px */
  width: var(--hs-radio-size);
  height: var(--hs-radio-size);
  border-radius: 50%;
  border: var(--hs-radio-border) solid var(--color-violet);
  flex-shrink: 0;
  display: inline-block;
}

.hs-radio--selected {
  border-color: var(--color-violet);
  background: var(--color-primary);
  box-shadow: inset 0 0 0 var(--space-0-8) var(--color-white); /* ~3px inset ring */
}
.mia-page {
  height: 100vh;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  padding-top: var(--space-10);
  /* Without this, the FilterBar's dropdown panel (position: absolute,
     up to --space-22 tall) can extend past this page's own 100vh box —
     since nothing here clips it, the browser adds a genuine page-level
     scrollbar to reveal the overflow the moment the panel opens, on top
     of .mia-body's own CustomScrollbar. .um-page already has this; the
     other pages using FilterBar were missing it. */
  overflow: hidden;
}

.mia-page .app-tabs-wrapper {
  position: static;
}

.mia-page .fb-wrapper {
  position: relative;
  top: 0;
  background: var(--color-white);
  border-bottom: none;
  margin: 0;
}

.mia-filter-divider {
  height: var(--space-px);
  background: var(--color-kpigrey);
  margin: 0 var(--space-lg);
}

.mia-divider {
  height: var(--space-px);
  background: var(--color-kpigrey);
  margin: 0;
}

.mia-body {
  flex: 1;
  min-height: 0;
}

.mia-body-content {
  padding: 0 var(--space-lg) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ── KPI row ─────────────────────────────────────────────── */
.mia-kpi-note {
  text-align: right;
  font-size: var(--font-size-sm);
  color: var(--color-kpiblack);
  font-family: var(--font-family-base);
  padding: 0 var(--space-md);
  padding-top: var(--space-sm);
  margin-bottom: calc(var(--space-sm) * -1);
}

.mia-kpi-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 var(--space-md) var(--space-md);
  padding-bottom: var(--space-xs);
}

.mia-kpi-row::-webkit-scrollbar {
  display: none;
}

.mia-kpi-row .kpi-card {
  min-width: var(--space-35);
  flex: 1 0 var(--space-35);
  scroll-snap-align: start;
}

/* ── Two-column charts row ───────────────────────────────── */
.mia-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}

.mia-chart-half {
  background: var(--color-white);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mia-chart-half:first-child {
  border-right: var(--space-px) solid var(--color-kpigrey);
}

.mia-chart-half:only-child {
  border-right: none;
}

.mia-charts-row:has(.mia-chart-half:only-child) {
  grid-template-columns: 1fr;
}

.mia-chart-inner {
  position: relative;
  min-width: var(--space-34);
  padding: var(--space-md) var(--space-md) 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-xs);
}

.mia-media-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  z-index: 10;
  border-radius: var(--radius-sm);
}

/* ── Full-width chart ────────────────────────────────────── */
.mia-chart-full {
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  padding: var(--space-xs) var(--space-md) 0;
  gap: var(--space-xs);
}

/* ── Chart header ────────────────────────────────────────── */
.mia-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  flex-wrap: nowrap;
}

.mia-chart-header > div:first-child {
  flex: 1;
  min-width: 0;
}

.mia-chart-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: 0;
  font-family: var(--font-family-display);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  white-space: nowrap;
}

.mia-chart-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-kpiblack);
  margin: var(--space-px) 0 0;
  font-family: var(--font-family-base);
}

/* ── Chart actions ───────────────────────────────────────── */
.mia-chart-actions {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.mia-chart-actions--stack {
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
}

.mia-chart-actions-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.mia-chart-actions-row--end {
  justify-content: flex-end;
  padding-top: var(--space-2-5);
}

.mia-chart-actions .hs-wrap {
  max-width: var(--space-13-75);
  min-width: var(--space-9-375);
}

/* ── Toggle group ────────────────────────────────────────── */
.mia-toggle-group {
  display: flex;
  border: var(--space-px) solid var(--color-primary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.mia-toggle {
  padding: var(--space-xs) var(--space-2-5);
  background: none;
  border: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-base);
  color: var(--color-primary);
  cursor: pointer;
  transition:
    background var(--motion-duration-fast) ease,
    color var(--motion-duration-fast) ease;
  white-space: nowrap;
}

.mia-toggle--active {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ── Icon button ─────────────────────────────────────────── */
.mia-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
  padding: var(--space-0-8);
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition:
    color var(--motion-duration-fast) ease,
    background var(--motion-duration-fast) ease;
}

.mia-icon-btn:hover {
  background: var(--color-bg-hover-light);
}

/* ── Bubble chart legend ─────────────────────────────────── */
.mia-bubble-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
}

.mia-bubble-legend-dot {
  width: var(--space-md);
  height: var(--space-md);
  border-radius: 50%;
  border: var(--space-px) solid var(--color-kpigrey);
  background: transparent;
  display: inline-block;
}

/* ── Platform dropdown row ───────────────────────────────── */
.mia-platform-dropdown-row {
  display: flex;
  justify-content: flex-end;
}

/* ── Campaign Efficiency chart wrap ──────────────────────── */
.mia-eff-chart-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ── Campaign efficiency funnel no-data placeholder ─────── */
.mia-eff-no-funnel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  background: var(--color-lightgrey);
  border-radius: var(--radius-sm);
}

.mia-eff-no-funnel-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-md);
}

/* ── Campaign KPI grid ───────────────────────────────────── */
.mia-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.mia-kpi-grid-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-lightgrey);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  gap: var(--space-md);
}

.mia-kpi-grid-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  font-family: var(--font-family-base);
}

.mia-kpi-grid-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  font-family: var(--font-family-display);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1200px) {
  .mia-kpi-row {
    flex-wrap: wrap;
  }
}

/* Below ~600px, flex-wrap's natural reflow depends on each card's own
   min-width vs. the exact remaining space, which can land on 1-per-row
   (a lot of dead space beside each card) as often as 2. Switch to an
   explicit 2-column grid so mobile always gets a predictable 2-and-2
   layout; an odd trailing card spans both columns instead of leaving an
   empty cell beside it. */
@media (max-width: 600px) {
  .mia-kpi-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .mia-kpi-row .kpi-card:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1024px) {
  .mia-charts-row {
    grid-template-columns: 1fr;
  }

  .mia-chart-half:first-child {
    border-right: none;
    border-bottom: var(--space-px) solid var(--color-kpigrey);
  }
}

/* .mia-kpi-grid (Campaign Efficiency's embedded KPI grid) lives inside
   .mia-chart-half, one column of the 2-up .mia-charts-row above. A plain
   @media query can only see the viewport, not this card's actual rendered
   width — so a breakpoint tied to "narrow viewport" alone would leave the
   grid stuck at 2 columns for the whole range where the row is still
   2-up but each half is only ~450–550px (roughly 1024–1300px viewport),
   which is genuinely cramped for label+value KPI pairs. Collapsing at the
   same 1024px breakpoint as the parent row guarantees the grid is never
   forced into 2 columns while its own card is still half-width. */
@media (max-width: 1024px) {
  .mia-kpi-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  /* .mia-chart-title has white-space: nowrap AND display: flex (for icon
     alignment) — text-overflow: ellipsis silently does not apply to a
     flex container's content, so this never actually truncated anything;
     the title just kept its full width and rendered underneath/behind the
     toggle group and table/download icons sitting beside it in
     .mia-chart-actions. Wrap the header instead — the same fix already
     used for .ir-chart-header's dropdown — so the title gets its own full
     row and the actions (toggle group + icons) drop to a row below
     whenever they don't both fit on one line. */
  .mia-chart-header {
    flex-wrap: wrap;
  }

  .mia-chart-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1 0 100%;
  }
}
.pd-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ── Section ─────────────────────────────────────────────── */
.pd-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.pd-section-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
  font-family: var(--font-family-display);
  margin: 0;
}

.pd-divider {
  height: var(--space-px);
  background: var(--color-kpigrey);
}

/* ── Performance Highlights ──────────────────────────────── */
.pd-highlights-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.pd-highlight-card {
  background: var(--color-white);
  border: var(--space-px) solid var(--color-highlight-card-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.pd-highlight-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.pd-highlight-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-display);
  color: var(--color-black);
}

.pd-highlight-emoji {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-none);
}

.pd-highlight-user {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  font-family: var(--font-family-display);
  margin-top: var(--space-0-5);
}

.pd-highlight-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
}

.pd-highlight-value {
  font-size: var(--font-size-xs);
  font-family: var(--font-family-base);
  margin-top: var(--space-0-5);
}

.pd-highlight-value-label {
  color: var(--color-text-muted);
}

/* ── Campaign Overview ───────────────────────────────────── */
.pd-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

.pd-metric-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--color-white);
  border: var(--space-px) solid var(--color-kpigrey);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
}

.pd-metric-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.pd-metric-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pd-metric-icon-svg {
  display: block;
  width: var(--space-5);
  height: var(--space-5);
  flex-shrink: 0;
}

.pd-metric-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-0-5);
  min-width: 0;
}

.pd-metric-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  white-space: nowrap;
}

.pd-metric-value {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
  font-family: var(--font-family-display);
}

/* ── Key Performance Insights ────────────────────────────── */
.pd-insights-section {
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pd-insights-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.pd-insights-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
  font-family: var(--font-family-display);
  margin: 0;
}

.pd-insights-subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  margin: 0;
}

.pd-insights-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-sm);
}

.pd-insight-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
}

.pd-insight-item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.pd-insight-circle {
  width: var(--space-11);
  height: var(--space-11);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-display);
  box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-tooltip);
  flex-shrink: 0;
}

.pd-insight-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
  font-family: var(--font-family-display);
}

.pd-insight-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  line-height: var(--line-height-relaxed);
}

/* ── Responsive ─────────────────────────────────────────────
   This dashboard renders inside .ir-split-right, which itself collapses
   to full page width on narrow viewports (see InfluencerROI.css) — at
   that point its fixed 4-and-3-column grids get too cramped. */
@media (max-width: 600px) {
  .pd-metrics-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .pd-insights-row {
    grid-template-columns: 1fr;
  }
}
.ir-page {
  height: 100vh;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  padding-top: var(--space-10);
  /* Without this, the FilterBar's dropdown panel (position: absolute,
     up to --space-22 tall) can extend past this page's own 100vh box —
     since nothing here clips it, the browser adds a genuine page-level
     scrollbar to reveal the overflow the moment the panel opens, on top
     of .ir-body's own CustomScrollbar. .um-page already has this; the
     other pages using FilterBar were missing it. */
  overflow: hidden;
}

.ir-page .app-tabs-wrapper {
  position: static;
}

.ir-page .fb-wrapper {
  position: relative;
  top: 0;
  background: var(--color-white);
  border-bottom: none;
  margin: 0;
}

.ir-filter-divider {
  height: var(--space-px);
  background: var(--color-kpigrey);
  margin: 0 var(--space-lg);
}

.ir-divider {
  height: var(--space-px);
  background: var(--color-kpigrey);
  margin: 0;
}

.ir-body {
  flex: 1;
  min-height: 0;
}

.ir-body-content {
  padding: 0 var(--space-lg) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ── KPI row ─────────────────────────────────────────────── */
.ir-kpi-note {
  text-align: right;
  font-size: var(--font-size-sm);
  color: var(--color-kpiblack);
  font-family: var(--font-family-base);
  padding-top: var(--space-sm);
  margin-bottom: calc(var(--space-sm) * -1);
}

.ir-kpi-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--space-xs);
}

.ir-kpi-row::-webkit-scrollbar {
  display: none;
}

.ir-kpi-row .kpi-card {
  min-width: var(--space-35);
  flex: 1 0 var(--space-35);
  scroll-snap-align: start;
}

/* ── Chart section (full width) ──────────────────────────── */
.ir-chart-full {
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  padding: var(--space-xs) var(--space-md) 0;
  gap: var(--space-xs);
}

/* Extend IPC chart to both card edges so "Impressions" label aligns
   with the component title on the left, and "Spend(R$)" aligns with
   the download icon on the right */
.ir-ipc-chart {
  margin-left: calc(-1 * var(--space-md));
  margin-right: calc(-1 * var(--space-md));
}

/* ── Chart header ────────────────────────────────────────── */
.ir-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  flex-wrap: nowrap;
}

/* Title/subtitle wrapper (unclassed in markup) — without min-width: 0 a
   flex item's floor is its content's natural (nowrap) width, so the
   .ir-chart-title below can never actually shrink far enough to ellipsis
   and instead pushes the header wider than its card at narrow widths. */
.ir-chart-header > div:first-child {
  flex: 1;
  min-width: 0;
}

.ir-chart-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: 0;
  font-family: var(--font-family-display);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  white-space: nowrap;
}

.ir-chart-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-kpiblack);
  margin: var(--space-px) 0 0;
  font-family: var(--font-family-base);
}

/* ── Chart actions ───────────────────────────────────────── */
.ir-chart-actions {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.ir-chart-actions .hs-wrap {
  max-width: var(--space-13-75);
}

/* ── Icon button ─────────────────────────────────────────── */
.ir-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
  padding: var(--space-0-8);
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition:
    color var(--motion-duration-fast) ease,
    background var(--motion-duration-fast) ease;
}

.ir-icon-btn:hover {
  background: var(--color-bg-hover-light);
}

/* ── Pills row ───────────────────────────────────────────── */
.ir-pills-row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.ir-pill {
  flex: 1;
  min-width: var(--space-8-75);
  background: var(--color-subtleblue);
  border: var(--space-px) solid var(--color-kpigrey);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  color: var(--color-kpi-title);
  white-space: nowrap;
}

.ir-pill:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.ir-pill-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.ir-pill-icon svg {
  width: auto;
  height: var(--space-2-75);
}

.ir-pill-value {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  font-family: var(--font-family-display);
}

.ir-pill-value--ahead {
  color: var(--color-delta-positive);
}

/* ── Split layout (Performance by Influencer) ────────────── */
.ir-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
  min-height: 0;
}

.ir-split-left {
  min-width: 0;
}

.ir-split-right {
  min-width: 0;
  overflow-y: auto;
}

.ir-widget-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--space-50);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Bubble Size legend icon — thin grey circle, scoped to IVPM chart only */
.ir-ivpm-chart .legend g.traces:first-child .legendsymbols path {
  stroke-width: 1px !important;
  stroke: #888888 !important;
  fill: none !important;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1200px) {
  .ir-kpi-row {
    flex-wrap: wrap;
  }
}

/* Below ~600px, flex-wrap's natural reflow depends on each card's own
   min-width vs. the exact remaining space, which can land on 1-per-row
   (a lot of dead space beside each card) as often as 2. Switch to an
   explicit 2-column grid so mobile always gets a predictable 2-and-2
   layout; an odd trailing card spans both columns instead of leaving an
   empty cell beside it. */
@media (max-width: 600px) {
  .ir-kpi-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .ir-kpi-row .kpi-card:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1024px) {
  .ir-split {
    grid-template-columns: 1fr;
  }

  .ir-split-right {
    max-height: var(--space-25);
  }
}

@media (max-width: 768px) {
  /* .ir-chart-title has white-space: nowrap for desktop alignment; at
     mobile widths that can push the header wider than its card and
     overflow the page. Let it truncate with an ellipsis instead. */
  .ir-chart-title {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* .ir-chart-header/.ir-chart-actions never wrap, and the
     "Select Channel, Platform[, Campaign]" HierarchySelect dropdown here
     (Influencers vs Paid Media, Performance by Influencer) is given a hard
     minWidth={280}/{300} prop — turned into an inline `min-width` that's
     LARGER than this rule's own `max-width: var(--space-13-75)` (220px)
     above, so per the CSS cascade min-width already always won and that
     max-width has never actually applied at any width. Let the header wrap
     to its own row and the dropdown shrink to fit instead of forcing the
     card wider than the viewport. */
  .ir-chart-header {
    flex-wrap: wrap;
  }

  .ir-chart-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1 0 100%;
  }

  .ir-chart-actions .hs-wrap {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
  }

  /* .ir-pill has white-space: nowrap and only a 140px min-width — at narrow
     widths a pill's real (unwrappable) text content is far wider than that
     floor, so instead of the row wrapping the *pill* onto its own line,
     each pill's text overflowed its own rounded border and visually
     overlapped the next pill. Let each pill wrap its own text and take a
     full row instead of trying to fit label+value on one line. */
  .ir-pill {
    flex: 1 1 100%;
    white-space: normal;
    text-align: center;
  }
}
/* ─── Page Layout ────────────────────────────────────────── */
.mo-page {
  height: 100vh;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  padding-top: var(--space-10);
  /* Without this, the FilterBar's dropdown panel (position: absolute, up
     to --space-22 tall) can extend past this page's own 100vh box — since
     nothing here clips it, the browser adds a genuine page-level scrollbar
     to reveal the overflow the moment the panel opens, on top of
     .mo-body's own CustomScrollbar. .um-page already has this; the other
     pages using FilterBar were missing it. */
  overflow: hidden;
}

/* Keep AppTabs non-sticky inside this page */
.mo-page .app-tabs-wrapper {
  position: static;
}

/* FilterBar: white bg, no sticky offset */
.mo-page .fb-wrapper {
  position: relative;
  top: 0;
  background: var(--color-white);
  border-bottom: none;
  margin: 0;
}

.mo-filter-divider {
  height: var(--space-px);
  background: var(--color-kpigrey);
  margin: 0 var(--space-lg);
}

.mo-body {
  flex: 1;
  min-height: 0;
}

.mo-body-content {
  padding: var(--space-md) var(--space-lg) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ─── Breadcrumb (static above filter bar) ───────────────── */
.mo-breadcrumb-bar {
  padding: 0 var(--space-lg);
}

.mo-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.mo-breadcrumb-item {
  color: var(--color-text-muted);
}

.mo-breadcrumb-sep {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
}

.mo-breadcrumb-active {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

/* ─── KPI Note ───────────────────────────────────────────── */
.mo-kpi-note {
  text-align: right;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: calc(var(--space-sm) * -1);
}

/* ─── KPI Row ────────────────────────────────────────────── */
.mo-kpi-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-md);
  overflow-x: auto;
  scrollbar-width: none;
}

.mo-kpi-row::-webkit-scrollbar {
  display: none;
}

.mo-kpi-row .kpi-card {
  min-width: var(--space-35);
  flex: 1 0 var(--space-35);
}

/* ─── Collapsible Section ────────────────────────────────── */
.mo-section {
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.mo-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-section-header-bg);
  border: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  cursor: pointer;
  text-align: left;
  transition: background var(--motion-duration-fast) ease;
}

.mo-section-header:hover {
  background: var(--color-section-header-bg-hover);
}

.mo-section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.mo-section-chevron {
  display: flex;
  align-items: center;
  color: var(--color-primary);
  transition: transform var(--motion-duration-normal) ease;
}

.mo-section-chevron--open {
  transform: rotate(180deg);
}

.mo-section-refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: var(--space-sm);
  padding: var(--space-xs);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  cursor: pointer;
  transition: color var(--motion-duration-fast) ease, background var(--motion-duration-fast) ease;
}

.mo-section-refresh-btn:hover:not(:disabled) {
  color: var(--color-primary);
  background: var(--color-section-icon-hover-bg);
}

.mo-section-refresh-btn:disabled {
  cursor: default;
  opacity: 0.5;
}

.mo-section-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) 0;
}

.mo-section-spinner {
  width: var(--space-7);
  height: var(--space-7);
  border: var(--space-0-1875) solid var(--color-section-spinner-track);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: mo-spin 0.7s linear infinite;
}

@keyframes mo-spin {
  to { transform: rotate(360deg); }
}

.mo-sections-divider {
  height: var(--space-px);
  background: var(--color-kpigrey);
  margin: 0;
}

.mo-section-header--static {
  cursor: default;
  pointer-events: none;
}

.mo-section-header--static:hover {
  background: var(--color-section-header-bg);
}

/* ─── Enter Constraints (plain, no accordion wrapper) ───────── */
.mo-constraints-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* ─── Full-width SelectDropdown in form ─────────────────────── */
.mo-sd-full {
  width: 100%;
}

.mo-sd-full .sd-trigger {
  width: 100%;
  min-width: 100%;
}

.mo-section-body {
  padding: var(--space-lg);
  border-top: var(--space-px) solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mo-section-body--table {
  padding: 0;
  gap: 0;
}

.mo-section-body--table .mo-scenario-actions {
  padding: var(--space-md) var(--space-lg);
  border-top: var(--space-px) solid var(--color-border);
}

/* ─── Shared checkbox ────────────────────────────────────── */
.mo-checkbox {
  width: var(--space-lg);
  height: var(--space-lg);
  accent-color: var(--color-primary);
  cursor: pointer;
  display: block;
}

/* ─── Status Badge ───────────────────────────────────────── */
.mo-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-0-4) var(--space-md);
  border-radius: var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.mo-status-badge--completed {
  background: rgba(4, 151, 124, 0.12);
  color: var(--color-success);
}

.mo-status-badge--in-progress {
  background: rgba(0, 84, 216, 0.1);
  color: var(--color-accent);
}

.mo-status-badge--queued {
  background: rgba(237, 138, 0, 0.1);
  color: var(--color-warning);
}

.mo-status-badge--failed {
  background: rgba(211, 47, 47, 0.1);
  color: var(--color-error);
}

.mo-status-badge--clickable {
  cursor: pointer;
}

.mo-status-badge--clickable:hover {
  filter: brightness(0.92);
}

.mo-status-info-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.mo-status-info-btn:hover {
  opacity: 1;
}

/* ─── Scenario action buttons ────────────────────────────── */
.mo-scenario-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
}

.mo-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-lg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition:
    background var(--motion-duration-fast) ease,
    opacity var(--motion-duration-fast) ease;
  border: var(--space-px) solid;
}

.mo-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mo-action-btn--outline {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.mo-action-btn--outline:hover:not(:disabled) {
  background: var(--color-bg-hover-light);
}

.mo-action-btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.mo-action-btn--primary:hover:not(:disabled) {
  background: var(--color-navbar);
  border-color: var(--color-navbar);
}

/* ─── Subsection Header ──────────────────────────────────── */
.mo-subsection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0.625rem;
}

.mo-subsection-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.mo-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

/* ─── Import Button ──────────────────────────────────────── */
.mo-import-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-3-5);
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-primary);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: background var(--motion-duration-fast) ease;
}

.mo-import-btn:hover {
  background: var(--color-bg-hover-light);
}

/* ─── Outlined Field (floating label style) ──────────────── */
.mo-ofield {
  border: var(--space-px) solid var(--color-kpigrey);
  border-radius: var(--radius-input);
  background: var(--color-white);
  padding: var(--space-0-6) var(--space-md) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-0-4);
  width: 100%;
  box-sizing: border-box;
}

.mo-ofield--tall {
  height: 100%;
  min-height: var(--space-30);
}

.mo-ofield-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
  white-space: nowrap;
  line-height: var(--line-height-tight);
}

.mo-ofield-select {
  border: none;
  background: transparent;
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  padding: 0;
  appearance: none;
  cursor: pointer;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748B' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: var(--space-lg);
}

.mo-ofield-select:focus {
  outline: none;
}

.mo-ofield-input {
  border: none;
  background: transparent;
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  padding: 0;
  width: 100%;
  flex: 1;
}

.mo-ofield-input:focus {
  outline: none;
}

.mo-ofield-textarea {
  border: none;
  background: transparent;
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  padding: 0;
  width: 100%;
  flex: 1;
  resize: none;
  min-height: 5rem;
}

.mo-ofield-textarea:focus {
  outline: none;
}

.mo-ofield-spend-value {
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  font-weight: var(--font-weight-medium);
  padding: var(--space-0-5) 0;
}

.mo-ofield-pct-wrap {
  display: flex;
  align-items: center;
  width: 100%;
}

.mo-ofield-pct-suffix {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-left: auto;
  padding-right: var(--space-0-5);
}

.mo-ofield:focus-within {
  border-color: var(--color-primary);
}

/* ─── Form Grid ──────────────────────────────────────────── */
.mo-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.3fr;
  gap: var(--space-lg);
  align-items: stretch;
}

.mo-form-left,
.mo-form-middle {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mo-form-right {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Scenario Name: grows to fill remaining left-column height ── */
.mo-form-name-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
  min-height: 0;
}

/* let the InputField wrapper stretch */
.mo-form-name-wrap .input-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mo-form-name-wrap .input-field-inner {
  flex: 1;
  align-items: flex-start;
}

.mo-form-name-wrap .input-field {
  height: 100%;
}

/* ── Grey borders for Scenario Details ─────────────────────── */
.mo-form-left .input-field {
  border-color: var(--color-kpigrey);
  color: var(--color-black);
  font-size: var(--font-size-base);
}

.mo-form-left .input-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.mo-form-left .input-field:focus ~ .input-label,
.mo-form-left .input-field.has-value ~ .input-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-2xs);
}

/* Scenario Type dropdown — same compact height */
.mo-sd-full .sd-trigger {
  height: var(--space-11);
  min-height: var(--space-11);
}


/* Red required asterisk for Scenario Type and Scenario Name labels */
.mo-sd-full .sd-label::after,
.mo-form-name-wrap .input-label::after {
  content: " *";
  color: var(--color-error);
}

.mo-field-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.mo-field-wrap--full {
  flex: 1;
}

.mo-field-label {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  margin: 0 var(--space-2-5);
}

.mo-required {
  color: var(--color-error);
}

/* ─── Select ─────────────────────────────────────────────── */
.mo-select {
  width: 100%;
  padding: var(--space-sm) var(--space-xxl) var(--space-sm) var(--space-2-5);
  border: var(--space-px) solid var(--color-input-border);
  border-radius: var(--radius-input);
  background: var(--color-white);
  color: var(--color-text-body);
  font-size: var(--font-size-base);
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748B' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
}

.mo-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* ─── Input ──────────────────────────────────────────────── */
.mo-input {
  padding: var(--space-sm) var(--space-2-5);
  border: var(--space-px) solid var(--color-input-border);
  border-radius: var(--radius-input);
  background: var(--color-white);
  color: var(--color-text-body);
  font-size: var(--font-size-base);
  width: 100%;
  box-sizing: border-box;
}

.mo-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.mo-input--suffix {
  padding-right: var(--space-7);
}

.mo-name-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}

.mo-name-error-text {
  font-size: var(--font-size-sm);
  color: var(--color-error);
  padding-left: var(--space-md);
  flex: 1;
}

.mo-char-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.mo-char-count--error {
  color: var(--color-error);
  font-weight: var(--font-weight-medium);
}

.mo-input-suffix-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.mo-input-suffix {
  position: absolute;
  right: var(--space-2-5);
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  pointer-events: none;
}

/* ─── Textarea ───────────────────────────────────────────── */
.mo-textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-2-5);
  border: var(--space-px) solid var(--color-input-border);
  border-radius: var(--radius-input);
  background: var(--color-white);
  color: var(--color-black);
  font-size: var(--font-size-base);
  resize: vertical;
  box-sizing: border-box;
  min-height: 5.625rem;
}

.mo-textarea:focus {
  outline: none;
  border-color: var(--color-black);
}

/* ─── Target Spend Display ───────────────────────────────── */
.mo-spend-display {
  display: flex;
  align-items: baseline;
  gap: var(--space-1-5);
  padding: var(--space-sm) var(--space-2-5);
  border: var(--space-px) solid var(--color-input-border);
  border-radius: var(--radius-input);
  background: var(--color-white);
  font-size: var(--font-size-base);
}

.mo-spend-prefix {
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
}

.mo-spend-value {
  color: var(--color-text-body);
  font-weight: var(--font-weight-medium);
}

/* ─── Target Spend Slider ────────────────────────────────── */
.mo-spend-slider {
  position: relative;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  margin-top: 0;
}

.mo-spend-range-input {
  position: absolute;
  width: 100%;
  left: 0;
  top: 1.375rem;
  appearance: none;
  -webkit-appearance: none;
  height: var(--space-xs);
  background: transparent;
  z-index: 4;
  cursor: grab;
  touch-action: none;
}

.mo-spend-range-input:active {
  cursor: grabbing;
}

.mo-spend-range-input::-webkit-slider-runnable-track {
  height: var(--space-0-5);
  background: var(--color-border);
  border-radius: var(--space-px);
  width: 100%;
}

.mo-spend-range-input::-moz-range-track {
  height: var(--space-0-5);
  background: var(--color-border);
  border-radius: var(--space-px);
  width: 100%;
}

/* ── Slider thumb: the visible blue dot — native element for smooth drag ─ */
.mo-spend-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--space-3-5);
  height: var(--space-3-5);
  border-radius: 50%;
  background: var(--color-primary);
  margin-top: calc(-1 * var(--space-1-2));
  cursor: grab;
  border: none;
  box-shadow: 0 var(--space-px) var(--space-xs) rgba(0, 84, 216, 0.35);
  will-change: transform;
  transition: box-shadow var(--motion-duration-fast) ease;
}

.mo-spend-range-input:active::-webkit-slider-thumb {
  cursor: grabbing;
  box-shadow: 0 var(--space-0-5) var(--space-sm) rgba(0, 84, 216, 0.5);
}

.mo-spend-range-input::-moz-range-thumb {
  width: var(--space-3-5);
  height: var(--space-3-5);
  border-radius: 50%;
  background: var(--color-primary);
  cursor: grab;
  border: none;
  box-shadow: 0 var(--space-px) var(--space-xs) rgba(0, 84, 216, 0.35);
  will-change: transform;
  transition: box-shadow var(--motion-duration-fast) ease;
}

.mo-spend-range-input:active::-moz-range-thumb {
  cursor: grabbing;
  box-shadow: 0 var(--space-0-5) var(--space-sm) rgba(0, 84, 216, 0.5);
}

/* ── Hover badge — sits in the padding area above the track ─ */
.mo-spend-indicator-pct {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  visibility: hidden;
  background: rgba(40, 60, 126, 0.08);
  color: var(--color-primary);
  border-radius: 20px;
  padding: 4px 8px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  line-height: var(--line-height-snug);
}

.mo-spend-slider:hover .mo-spend-indicator-pct {
  visibility: visible;
}

.mo-spend-tick-value {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  white-space: nowrap;
  line-height: 1;
  margin-top: 1px;
}

/* ── Static tick marks (always grey, z-index ABOVE track) ── */
.mo-spend-ticks {
  position: absolute;
  top: 1.25rem;
  left: 0;
  right: 0;
  z-index: 3;
  pointer-events: none;
}

.mo-spend-tick {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.mo-spend-tick--first {
  transform: translateX(0);
  align-items: flex-start;
}

.mo-spend-tick--last {
  transform: translateX(-100%);
  align-items: flex-end;
}

.mo-spend-tick-dot {
  width: var(--space-sm);
  height: var(--space-sm);
  border-radius: 50%;
  background: var(--color-border);
}

.mo-spend-tick-label {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.mo-spend-zero-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-top: var(--space-0-4);
}

/* ─── Form Divider ───────────────────────────────────────── */
.mo-form-divider {
  height: var(--space-px);
  background: var(--color-kpigrey);
}

/* ─── Optimisation Level ─────────────────────────────────── */
.mo-optim-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mo-optim-level {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.mo-radio-group {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin: 0 var(--space-lg);
}

.mo-radio-label {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--font-size-base);
  cursor: pointer;
  color: var(--color-text-body);
}

.mo-radio {
  accent-color: var(--color-primary);
  cursor: pointer;
}

.mo-radio-text--disabled {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.mo-recap-btn {
  padding: var(--space-1-5) var(--space-lg);
  border: var(--space-px) solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--motion-duration-fast) ease;
}

.mo-recap-btn:hover {
  background: var(--color-bg-hover-light);
}

/* ─── Global Constraints Bar ─────────────────────────────── */
.mo-constraints-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mo-global-constraints {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-lightgrey);
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  gap: var(--space-md);
  /* Anchors .mo-gc-col-section/.mo-gc-slider-section's absolute
     left/width, which MediaOptimisationSimulator.tsx sets from the live
     table header cells' own measured position (see
     useLayoutEffect there) so they track the table's real Min/Slider/Max
     column boundaries exactly, at any width, instead of a static guess. */
  position: relative;
}

.mo-gc-col-section {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  justify-content: center;
  position: absolute;
  top: 0;
  height: 100%;
}

.mo-gc-slider-section {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  height: 100%;
}

.mo-global-label {
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  font-weight: var(--font-weight-medium);
  flex: 1;
}

.mo-global-label-accent {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.mo-gc-field-label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-black);
}

.mo-gc-input-wrap {
  display: flex;
  align-items: center;
  border: var(--space-px) solid var(--color-input-border);
  border-radius: var(--radius-sm);
  background: var(--color-lightgrey);
  overflow: hidden;
}

.mo-gc-input {
  padding: var(--space-1-4) var(--space-sm);
  border: none;
  background: var(--color-lightgrey);
  color: var(--color-text-body);
  font-size: var(--font-size-base);
  width: 4.25rem;
  text-align: right;
}

.mo-gc-input:focus {
  outline: none;
}

.mo-gc-suffix {
  padding: var(--space-1-4) var(--space-sm) var(--space-1-4) 0;
  font-size: var(--font-size-base);
  color: var(--color-black);
  background: var(--color-lightgrey);
}

.mo-gc-reset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-lightgrey);
  color: var(--color-text-muted);
  cursor: pointer;
  transition:
    color var(--motion-duration-fast) ease,
    background var(--motion-duration-fast) ease;
}

.mo-gc-reset-btn:hover {
  color: var(--color-text-muted);
  background: var(--color-grey);
}

/* ─── Constraints Table ──────────────────────────────────── */
.mo-table-wrap {
  overflow: auto;
  max-height: 24rem;
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  position: relative;
}

.mo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
  background: var(--color-white);
}

.mo-table thead {
  background: var(--color-lightgrey);
  position: sticky;
  top: 0;
  z-index: 1;
}

.mo-table th {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  border-bottom: var(--space-px) solid var(--color-border);
  white-space: nowrap;
  background: var(--color-lightgrey);
}

.mo-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--space-px) solid var(--color-border);
  color: var(--color-text-body);
  font-size: var(--font-size-base);
}

.mo-table tbody tr:last-child td {
  border-bottom: none;
}

.mo-table tbody tr:hover {
  background: var(--color-bg-hover-light);
}

.mo-th-lock,
.mo-td-lock {
  width: var(--space-10);
  text-align: center;
}

.mo-lock-btn {
  background: none;
  border: none;
  padding: var(--space-xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background var(--motion-duration-fade) ease;
}

.mo-lock-btn:hover {
  background: var(--color-lightgrey);
}

.mo-row-locked {
  background: rgba(0, 0, 0, 0.02);
  opacity: 0.6;
}

.mo-row-locked input:disabled {
  cursor: not-allowed;
}

/* Grey out the whole pct container (input + % sign) so the % remains visible */
.mo-row-locked .mo-constraint-pct {
  background: var(--color-lightgrey);
}

/* Grey out the R$ input too for visual consistency */
.mo-row-locked .mo-constraint-r-input {
  background: var(--color-lightgrey);
}

.mo-dual-range--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.mo-th-center {
  text-align: center;
}

.mo-td-slider {
  min-width: 10rem;
  padding: var(--space-sm) var(--space-lg);
}

/* ─── Constraints Table Header ───────────────────────────── */
.mo-cth-inner {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.mo-th-sort-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.mo-th-sort-btn:hover {
  color: var(--color-primary);
}

/* ─── Constraint Inputs ──────────────────────────────────── */
.mo-constraint-inputs {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
}

.mo-constraint-r-input {
  width: 6.5rem;
  padding: var(--space-1-4) var(--space-1-5);
  border: var(--space-px) solid var(--color-input-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text-body);
  font-size: var(--font-size-md);
  text-align: right;
}

.mo-constraint-r-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.mo-constraint-pct {
  display: flex;
  align-items: center;
  border: var(--space-px) solid var(--color-input-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  overflow: hidden;
}

.mo-constraint-pct-input {
  width: 3.5rem;
  padding: var(--space-1-4) var(--space-xs) var(--space-1-4) var(--space-1-5);
  border: none;
  background: transparent;
  color: var(--color-text-body);
  font-size: var(--font-size-md);
  text-align: right;
}

.mo-constraint-pct-input:focus {
  outline: none;
}

.mo-pct-sign {
  padding: var(--space-1-4) var(--space-1-5) var(--space-1-4) var(--space-0-5);
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
}


/* ─── Dual Range Slider ──────────────────────────────────── */
.mo-dual-range {
  position: relative;
  height: var(--space-5);
  display: flex;
  align-items: center;
}

.mo-dual-range-track {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--space-xs);
  background: var(--color-border);
  border-radius: var(--space-0-5);
}

.mo-dual-range-fill {
  position: absolute;
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--space-0-5);
}

.mo-range-thumb {
  position: absolute;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  height: var(--space-5);
  pointer-events: none;
  margin: 0;
}

.mo-range-thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--space-3-5);
  height: var(--space-3-5);
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  pointer-events: all;
  border: none;
  box-shadow: 0 var(--space-px) var(--space-0-8) rgba(0, 84, 216, 0.3);
}

.mo-range-thumb:disabled::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-text-muted);
  cursor: not-allowed;
  box-shadow: none;
}

.mo-range-thumb::-moz-range-thumb {
  width: var(--space-3-5);
  height: var(--space-3-5);
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  pointer-events: all;
  border: none;
  box-shadow: 0 var(--space-px) var(--space-0-8) rgba(0, 84, 216, 0.3);
}

.mo-range-thumb:disabled::-moz-range-thumb {
  background: var(--color-text-muted);
  cursor: not-allowed;
  box-shadow: none;
}

/* ─── Constraints Footer ─────────────────────────────────── */
.mo-constraints-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border: var(--space-px) solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--color-white);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ─── Run Scenario Wrapper ────────────────────────────────── */
.mo-run-scenario-wrapper {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-md);
}

.mo-run-scenario-btn {
  padding: var(--space-2-5) var(--space-7);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.mo-btn-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: mo-spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ─── Pagination (constraints) ───────────────────────────── */
.mo-pagination {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.mo-pg-label {
  white-space: nowrap;
}

.mo-pg-select {
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-0-4) var(--space-1-2);
  background: var(--color-white);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  cursor: pointer;
  font-family: var(--font-family-base);
  outline: none;
}

.mo-pg-info {
  white-space: nowrap;
  min-width: 4rem;
  text-align: center;
}

.mo-pg-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
  font-size: var(--font-size-2xl);
  line-height: 1;
  padding: 0 var(--space-0-4);
  display: flex;
  align-items: center;
  transition: color var(--motion-duration-fast) ease;
}

.mo-pg-btn:disabled {
  color: var(--color-text-placeholder);
  cursor: not-allowed;
}

/* ─── Run Scenario Button ────────────────────────────────── */
.mo-run-btn {
  padding: var(--space-2-5) var(--space-7);
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--motion-duration-normal) ease;
}

.mo-run-btn:hover {
  background: var(--color-navbar);
}

.mo-run-btn:active {
  transform: translateY(var(--space-px));
}

/* ─── Shared Button Styles (matching PerformanceOverview) ─── */
.po-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-1-5) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-display);
  cursor: pointer;
  transition: background var(--motion-duration-fast) ease;
}

.po-btn-primary svg {
  color: var(--color-white);
  fill: currentColor;
}

.po-btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.po-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.po-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-white);
  color: var(--color-primary);
  border: var(--space-px) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-1-5) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-display);
  cursor: pointer;
  transition: background var(--motion-duration-fast) ease;
}

.po-btn-secondary svg {
  color: var(--color-primary);
  fill: currentColor;
}

.mo-delete-btn svg {
  fill: none;
  stroke: var(--color-primary);
}

.po-btn-secondary:hover:not(:disabled) {
  background: var(--color-bg-hover-light);
}

.po-btn-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.po-btn-secondary--compact {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1200px) {
  .mo-kpi-row {
    flex-wrap: wrap;
  }

  .mo-form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mo-form-right {
    grid-column: 1 / -1;
  }
}

/* The Global Constraints bar's three sections (.mo-gc-col-section × 2 +
   .mo-gc-slider-section) are absolutely positioned to mirror the live
   DataTable's Min/Slider/Max column boundaries below it (measured in
   MediaOptimisationSimulator.tsx) — but that alignment only matters once
   those columns are actually visible side by side, which the table itself
   already abandons at narrow widths (it scrolls horizontally on its own,
   via DataTable's standard dt-inner-h overflow). Below that same table's
   own column widths' combined footprint, the bar had no responsive
   treatment at all: its absolutely-positioned sections don't wrap or
   scroll, so on a mobile viewport (~350–390px available) the Max section —
   and on anything narrower than ~1024px, increasingly more of the bar —
   gets positioned off past the card edge and is effectively unreachable
   (no scrollbar, no wrap). Let the bar wrap onto multiple rows instead:
   the instruction label gets its own full row, and Min / reset / Max fall
   back to their natural (unfixed, normal-flow) width and position —
   `!important` is needed because MediaOptimisationSimulator.tsx sets
   left/width as inline styles (for the desktop-aligned case), which
   otherwise always outrank a stylesheet media query. */
@media (max-width: 1024px) {
  .mo-global-constraints {
    flex-wrap: wrap;
    row-gap: var(--space-sm);
  }

  .mo-global-label {
    flex: 1 0 100%;
  }

  .mo-gc-col-section,
  .mo-gc-slider-section {
    position: static !important;
    width: auto !important;
    flex: 0 0 auto;
  }
}

/* Below ~600px, flex-wrap's natural reflow depends on each card's own
   min-width vs. the exact remaining space, which can land on 1-per-row
   (a lot of dead space beside each card) as often as 2. Switch to an
   explicit 2-column grid so mobile always gets a predictable 2-and-2
   layout; an odd trailing card spans both columns instead of leaving an
   empty cell beside it. */
@media (max-width: 600px) {
  .mo-kpi-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .mo-kpi-row .kpi-card:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .mo-form-grid {
    grid-template-columns: 1fr;
  }

  .mo-form-right {
    grid-column: auto;
  }
}

/* ─── Performance Recap Modal ────────────────────────────── */
.mo-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.mo-modal {
  background: var(--color-white);
  border-radius: var(--radius-md);
  width: 92%;
  max-width: 81.25rem;
  /* Size to content (header + table + footer) rather than a fixed height, so a
     short table doesn't leave whitespace below it. The table caps its own height
     at 350px and scrolls beyond that; max-height keeps the modal within the
     viewport. */
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 var(--space-sm) var(--space-10) rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.mo-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-sm);
  border-bottom: var(--space-px) solid var(--color-kpigrey);
  flex-shrink: 0;
  margin: 0 var(--space-xl);
}

.mo-modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
}

.mo-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-xxl);
  height: var(--space-xxl);
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition:
    background var(--motion-duration-fast) ease,
    color var(--motion-duration-fast) ease;
}

.mo-modal-close:hover {
  background: var(--color-lightgrey);
  color: var(--color-text-body);
}

.mo-modal-body {
  flex: 1;
  min-height: 0;
  padding: var(--space-xl);
  overflow-y: auto;
  outline: none;
}

.mo-modal-body:focus {
  outline: none;
}

.mo-modal-body::-webkit-scrollbar {
  display: none;
}

.mo-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2-5);
  padding: var(--space-md) 0;
  border-top: var(--space-px) solid var(--color-kpigrey);
  margin: 0 var(--space-xl);
  flex-shrink: 0;
}

/* ─── Confirm Delete Modal ────────────────────────────────── */
.mo-delete-modal {
  background: var(--color-white);
  border-radius: var(--radius-md);
  width: 26.25rem;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  box-shadow: 0 var(--space-sm) var(--space-10) rgba(0, 0, 0, 0.18);
}

.mo-delete-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-5) var(--space-3-5);
}

.mo-delete-modal-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
}

.mo-delete-modal-divider {
  height: var(--space-px);
  background: var(--color-kpigrey);
  margin: 0 var(--space-5) var(--space-xs);
  border-radius: var(--space-0-5);
}

.mo-delete-modal-body {
  padding: var(--space-lg) var(--space-5) var(--space-md);
}

.mo-delete-modal-text {
  font-size: var(--font-size-lg);
  color: var(--color-text-body);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

.mo-delete-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2-5);
  padding: var(--space-md) var(--space-5) var(--space-lg);
}

/* ─── Download Toast ─────────────────────────────────────── */
.mo-toast {
  position: fixed;
  top: var(--space-5);
  right: var(--space-xl);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  background: var(--color-success);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--font-size-base);
  box-shadow: 0 var(--space-xs) var(--space-lg) rgba(0, 0, 0, 0.18);
  max-width: 28.75rem;
  animation: mo-toast-in var(--motion-duration-normal) ease;
}

@keyframes mo-toast-in {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mo-toast-icon {
  flex-shrink: 0;
}

.mo-toast-msg {
  flex: 1;
  line-height: 1.4;
}

.mo-toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-white);
  opacity: 0.8;
  padding: 0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.mo-toast-close:hover {
  opacity: 1;
}

/* ─── Floating Label Textarea ────────────────────────────── */
.mo-textarea-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mo-textarea-field {
  width: 100%;
  flex: 1;
  min-height: 5rem;
  padding: var(--space-md) var(--space-md) var(--space-xs);
  border: var(--space-px) solid var(--color-kpigrey);
  border-radius: var(--radius-input);
  background-color: var(--color-input-bg);
  font-size: var(--font-size-sm);
  color: var(--color-black);
  outline: none;
  resize: none;
  font-family: var(--font-family-base);
  transition: border-color var(--motion-duration-normal) ease;
}

.mo-textarea-label {
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  pointer-events: none;
  transition:
    top var(--motion-duration-fast) ease,
    font-size var(--motion-duration-fast) ease,
    color var(--motion-duration-fast) ease;
}

.mo-textarea-field:focus ~ .mo-textarea-label,
.mo-textarea-field:not(:placeholder-shown) ~ .mo-textarea-label {
  top: calc(var(--space-px) * -6);
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  background: var(--color-input-bg);
  padding: 0 var(--space-xs);
  line-height: var(--line-height-none);
  margin-left: calc(var(--space-xs) * -1);
}

.mo-textarea-field:focus {
  border-color: var(--color-input-border-focus);
}

/* ─── Floating Label Number Input with Suffix ────────────── */
.mo-number-input-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: var(--space-lg);
}

.mo-number-input-field {
  width: 100%;
  height: var(--space-10);
  padding: var(--space-xs) var(--space-xxl) 0 var(--space-md);
  border: var(--space-px) solid var(--color-kpigrey);
  border-radius: var(--radius-input);
  background-color: var(--color-input-bg);
  font-size: var(--font-size-base);
  color: var(--color-black);
  outline: none;
  transition: border-color var(--motion-duration-normal) ease;
}

.mo-number-input-label {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  pointer-events: none;
  transition:
    top var(--motion-duration-fast) ease,
    font-size var(--motion-duration-fast) ease,
    color var(--motion-duration-fast) ease,
    transform var(--motion-duration-fast) ease;
}

.mo-number-input-field:focus ~ .mo-number-input-label,
.mo-number-input-field:not(:placeholder-shown) ~ .mo-number-input-label {
  top: calc(var(--space-px) * -6);
  transform: none;
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  background: var(--color-input-bg);
  padding: 0 var(--space-xs);
  line-height: var(--line-height-none);
  margin-left: calc(var(--space-xs) * -1);
}

.mo-number-input-suffix {
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  pointer-events: none;
}

.mo-number-input-field:focus {
  border-color: var(--color-input-border-focus);
}

/* ─── Target Spend Editable Input with Currency Adornment ─── */
.mo-display-field-wrapper {
  position: relative;
  width: 100%;
}

.mo-spend-input-adornment {
  position: absolute;
  left: var(--space-md);
  top: calc(47% + var(--space-xs) / 2);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  pointer-events: none;
  z-index: 1;
}

.mo-display-field {
  width: 100%;
  height: var(--space-10);
  padding: var(--space-xs) var(--space-md) 0 var(--space-2);
  border: var(--space-px) solid var(--color-kpigrey);
  border-radius: var(--radius-input);
  background-color: var(--color-input-bg);
  font-size: var(--font-size-base);
  color: var(--color-black);
}

.mo-display-field--input {
  outline: none;
  cursor: text;
}

.mo-display-field--input:focus {
  border-color: var(--color-input-border-focus);
}


.mo-display-field-label {
  position: absolute;
  left: var(--space-md);
  top: calc(var(--space-px) * -6);
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  background: var(--color-input-bg);
  padding: 0 var(--space-xs);
  line-height: var(--line-height-none);
  margin-left: calc(var(--space-xs) * -1);
  pointer-events: none;
}

/* ─── Import Confirm Loader ──────────────────────────────── */
.mo-import-confirm-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  height: 100%;
  min-height: 12rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

.mo-import-spinner {
  width: var(--space-10);
  height: var(--space-10);
  border: var(--space-0-1875) solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: mo-spin 0.7s linear infinite;
}

@keyframes mo-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ─── Error Details Modal ────────────────────────────────── */
.mo-error-modal {
  background: var(--color-white);
  border-radius: var(--radius-md);
  width: var(--space-31-25);
  max-width: 95vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 var(--space-sm) var(--space-10) rgba(0, 0, 0, 0.18);
}

.mo-error-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-5);
  border-bottom: var(--space-px) solid var(--color-border);
  margin: 0 var(--space-5);
  padding-left: 0;
  padding-right: 0;
}

.mo-error-modal-title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-1875);
}

.mo-error-modal-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
}

.mo-error-modal-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}

.mo-error-modal-body {
  padding: var(--space-lg) var(--space-5);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.mo-error-modal-text {
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

.mo-stage-steps {
  display: flex;
  flex-direction: column;
}

.mo-stage-item {
  display: flex;
  gap: var(--space-lg);
  align-items: stretch;
}

.mo-stage-item--pending {
  opacity: 0.6;
}

.mo-stage-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: var(--space-2-25);
}

.mo-stage-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-2-25);
  height: var(--space-2-25);
  border-radius: 50%;
  flex-shrink: 0;
}

.mo-stage-icon--success {
  background: rgba(4, 151, 124, 0.12);
  border: var(--space-0-5) solid var(--color-success);
  color: var(--color-success);
}

.mo-stage-icon--failed {
  background: rgba(211, 47, 47, 0.08);
  border: var(--space-0-5) solid var(--color-error);
  color: var(--color-error);
}

.mo-stage-icon--pending {
  background: var(--color-surface, #f8f9fa);
  border: var(--space-0-5) dashed var(--color-border);
  color: var(--color-text-muted);
}

.mo-stage-line {
  width: var(--space-0-5);
  flex: 1;
  min-height: var(--space-5);
  margin-top: var(--space-0-1875);
}

.mo-stage-line--solid {
  background: var(--color-success);
}

.mo-stage-line--dashed {
  background: repeating-linear-gradient(
    to bottom,
    var(--color-text-placeholder) 0,
    var(--color-text-placeholder) var(--space-xs),
    transparent var(--space-xs),
    transparent var(--space-sm)
  );
}

.mo-stage-right {
  flex: 1;
  min-width: 0;
  padding-bottom: var(--space-5);
}

.mo-stage-item:last-child .mo-stage-right {
  padding-bottom: var(--space-sm);
}

.mo-stage-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-1875);
  padding-top: var(--space-0-4375);
}

.mo-stage-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.mo-stage-name--success {
  color: var(--color-success);
}

.mo-stage-name--failed {
  color: var(--color-error);
}

.mo-stage-name--pending {
  color: var(--color-text-muted);
}

.mo-stage-sublabel {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
}

.mo-stage-callout {
  position: relative;
  border: var(--space-0-09375) solid rgba(211, 47, 47, 0.35);
  border-radius: var(--radius-md);
  background: rgba(211, 47, 47, 0.04);
  overflow: hidden;
}

.mo-stage-callout-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--space-0-1875);
  background: var(--color-error);
}

.mo-stage-callout-inner {
  padding: var(--space-md) var(--space-3-5) var(--space-md) var(--space-4-5);
}

.mo-stage-callout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.mo-stage-callout-divider {
  height: var(--space-px);
  background: rgba(211, 47, 47, 0.2);
  margin: var(--space-2-5) 0;
}

.mo-stage-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-1875) var(--space-2-5);
  border-radius: var(--radius-pill);
  background: var(--color-error);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.mo-stage-error-msg {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  line-height: var(--line-height-relaxed);
  margin: 0;
  align-items: flex-start;
}

.mo-stage-error-icon {
  flex-shrink: 0;
  color: var(--color-error);
  margin-top: var(--space-px);
}


/* ─── Running Scenario Modal ─────────────────────────────── */
.mo-running-modal {
  background: var(--color-white);
  border-radius: var(--radius-md);
  width: var(--space-37-5);
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  box-shadow: 0 var(--space-sm) var(--space-10) rgba(0, 0, 0, 0.18);
}

.mo-running-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-5);
  border-bottom: var(--space-px) solid var(--color-border);
  margin: 0 var(--space-5);
  padding-left: 0;
  padding-right: 0;
}

.mo-running-modal-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
}

.mo-running-modal-body {
  padding: var(--space-xxl) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-lg);
}

.mo-running-illustration {
  margin-bottom: var(--space-md);
}

.mo-running-text-primary {
  font-size: var(--font-size-base);
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

.mo-running-text-secondary {
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

.mo-running-error-msg {
  font-size: var(--font-size-base);
  color: var(--color-error);
  font-weight: var(--font-weight-medium);
  margin: 0;
  line-height: var(--line-height-relaxed);
  text-align: center;
}

.mo-running-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-md) var(--space-5);
  border-top: var(--space-px) solid var(--color-border);
  margin: 0 var(--space-5);
  padding-left: 0;
  padding-right: 0;
}
/* ─── Page Layout ────────────────────────────────────────── */
.mor-page {
  height: 100vh;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  padding-top: var(--space-10);
  /* Without this, the FilterBar's dropdown panel (position: absolute, up
     to --space-22 tall) can extend past this page's own 100vh box — since
     nothing here clips it, the browser adds a genuine page-level scrollbar
     to reveal the overflow the moment the panel opens, on top of
     .mor-body's own CustomScrollbar. .um-page already has this; the other
     pages using FilterBar were missing it. */
  overflow: hidden;
}

/* Keep AppTabs non-sticky inside this page */
.mor-page .app-tabs-wrapper {
  position: static;
}

/* FilterBar: white bg, no sticky offset */
.mor-page .fb-wrapper {
  position: relative;
  top: 0;
  background: var(--color-white);
  border-bottom: none;
  margin: 0;
}


.mor-filter-divider {
  height: var(--space-px);
  background: var(--color-kpigrey);
  margin: 0 var(--space-lg);
}

.mor-body {
  flex: 1;
  min-height: 0;
}

.mor-body-content {
  padding: var(--space-md) var(--space-lg) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ─── Breadcrumb (static above filter bar) ───────────────── */
.mor-breadcrumb-bar {
  padding: 0 var(--space-lg);
}

.mor-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.mor-breadcrumb-item {
  color: var(--color-text-muted);
}

.mor-breadcrumb-link {
  cursor: pointer;
  transition: color 0.15s;
}

.mor-breadcrumb-link:hover {
  color: var(--color-primary);
}

.mor-breadcrumb-sep {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
}

.mor-breadcrumb-active {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

/* ─── KPI Note ───────────────────────────────────────────── */
.mor-kpi-note {
  text-align: right;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: calc(var(--space-sm) * -1);
}

/* ─── KPI Row ────────────────────────────────────────────── */
.mor-kpi-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-md);
  overflow-x: auto;
  scrollbar-width: none;
}

.mor-kpi-row::-webkit-scrollbar {
  display: none;
}

.mor-kpi-row .kpi-card {
  min-width: var(--space-35);
  flex: 1 0 var(--space-35);
}

/* ─── Section ────────────────────────────────────────────── */
.mor-section {
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.mor-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-section-header-bg);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: background var(--motion-duration-fast) ease;
}


.mor-section-header--open {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.mor-section-header:hover {
  background: var(--color-section-header-bg-hover);
}

.mor-section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  font-family: var(--font-family-base);
}

.mor-section-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.mor-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding-sized like the simulator's .mo-section-refresh-btn so the
     accordion header height matches the Existing/Create Scenario sections */
  padding: var(--space-xs);
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition:
    background 0.15s,
    color 0.15s;
}

.mor-icon-btn:hover {
  background: var(--color-section-icon-hover-bg);
  color: var(--color-primary);
}

.mor-section-chevron {
  display: flex;
  align-items: center;
  color: var(--color-primary);
  transition: transform 0.2s;
}

.mor-section-chevron--open {
  transform: rotate(180deg);
}

.mor-section-body {
  padding: var(--space-lg);
  border-top: var(--space-px) solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ─── Chart Legend ───────────────────────────────────────── */
.mor-chart-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}

.mor-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  /* Match Plotly legend labels (chartFontSize.sm) so HTML and chart legends read as one size */
  font-size: var(--chart-font-size-sm);
  color: var(--color-black);
  font-weight: var(--font-weight-regular);
}

.mor-legend-dot {
  width: var(--space-3-5);
  height: var(--space-3-5);
  border-radius: var(--space-0-1875);
}

.mor-legend-dot--blue {
  background: var(--color-accent);
}

.mor-legend-dot--red {
  background: var(--color-error);
}

.mor-legend-dot--teal {
  background: #00CAB8;
}

/* ─── Bar Chart ──────────────────────────────────────────── */
.mor-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mor-chart-row {
  display: grid;
  grid-template-columns: 200px 1fr 80px;
  align-items: center;
  gap: var(--space-md);
}

.mor-chart-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  font-weight: var(--font-weight-medium);
}

.mor-chart-bar-wrap {
  height: var(--space-xxl);
  background: var(--color-lightgrey);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.mor-chart-bar {
  height: 100%;
  transition: width 0.3s ease;
}

.mor-chart-bar--blue {
  background: var(--color-accent);
}

.mor-chart-bar--red {
  background: var(--color-error);
}

.mor-chart-bar--teal {
  background: var(--color-success);
}

.mor-chart-value {
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  font-weight: var(--font-weight-semibold);
  text-align: right;
}

/* ─── Section Divider ────────────────────────────────────── */
.mor-divider {
  height: var(--space-px);
  background: var(--color-kpigrey);
}

/* ─── Mini Bar Chart (inline in table cells) ─────────────── */
.mor-mini-bar-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: var(--space-4);
}

.mor-mini-bar-track {
  height: var(--space-xs);
  background: var(--color-lightgrey);
  border-radius: var(--space-0-5);
  overflow: hidden;
}

.mor-mini-bar-fill {
  height: 100%;
  border-radius: var(--space-0-5);
  transition: width 0.3s ease;
}

.mor-mini-bar-fill--pos {
  background: var(--color-success);
}

.mor-mini-bar-fill--neg {
  background: var(--color-error);
}

/* ─── Scenario Header ────────────────────────────────────── */
.mor-scenario-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--space-px) solid var(--color-border);
  background: var(--color-section-header-bg);
}

.mor-scenario-header::-webkit-scrollbar {
  display: none;
}

.mor-scenario-info {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.mor-scenario-label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-base);
  color: var(--color-text-muted);
}

.mor-scenario-name {
  font-size: var(--font-size-md);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mor-scenario-meta {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-shrink: 0;
}

.mor-scenario-date {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.mor-toggle-label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
}

.mor-toggle-checkbox {
  width: var(--space-4);
  height: var(--space-4);
  accent-color: var(--color-primary);
  cursor: pointer;
}

.mor-recap-btn {
  padding: var(--space-0-4375) var(--space-lg);
  border: var(--space-px) solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-display);
  background: var(--color-white);
  color: var(--color-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.15s;
}

.mor-recap-btn:hover {
  background: var(--color-bg-hover-light);
}

/* ─── View Toggle ────────────────────────────────────────── */
.mor-view-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  width: fit-content;
  padding: var(--space-px);
}

.mor-tab-btn {
  padding: var(--space-xs) var(--space-md);
  border: none;
  background: transparent;
  color: var(--color-text-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-display);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition:
    background 0.15s,
    color 0.15s;
}

.mor-tab-btn:hover {
  background: var(--color-lightgrey);
}

.mor-tab-btn--active {
  background: var(--color-primary);
  color: var(--color-white);
}

.mor-tab-btn--active:hover {
  background: var(--color-navbar);
}

/* ─── Table Section ──────────────────────────────────────── */
.mor-table-section {
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  overflow: hidden;
}

.mor-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-lightgrey);
  border-bottom: var(--space-px) solid var(--color-border);
}

.mor-table-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.mor-icon-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-md);
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text-body);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.mor-icon-btn-outline:hover {
  background: var(--color-bg-hover-light);
  border-color: var(--color-primary);
}

/* ─── Compare Section ────────────────────────────────────── */
.mor-compare-section {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-md) 0;
}

.mor-compare-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-1-5) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-display);
  cursor: pointer;
  transition: background var(--motion-duration-fast) ease;
}

.mor-compare-btn:hover {
  background: var(--color-primary-hover);
}

.mor-compare-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ─── Legend dots (additional colours) ──────────────────── */
.mor-legend-dot--grey {
  background: #C8C8C8;
}

.mor-legend-dot--pink {
  background: #ec4899;
}

/* ─── Table toolbar ──────────────────────────────────────── */
.mor-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-lg);
}

.mor-table-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.mor-icon-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--color-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition:
    background 0.15s,
    color 0.15s;
  padding: var(--space-0-8);
}

.mor-icon-btn-sm:hover {
  background: var(--color-section-icon-hover-bg);
  color: var(--color-primary);
}

/* ─── Results table ──────────────────────────────────────── */
.mor-table-scroll-wrap {
  width: 100%;
}




.mor-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  /* Let columns grow based on content to avoid bar overlap */
  table-layout: auto;
}


.mor-results-table thead {
  background: var(--color-lightgrey);
}

.mor-results-table th {
  padding: var(--space-sm) var(--space-lg);
  text-align: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  border-bottom: var(--space-px) solid var(--color-border);
  white-space: nowrap;
  background: var(--color-lightgrey);
  vertical-align: middle;
}

.mor-th-sortable {
  cursor: pointer;
  user-select: none;
}

.mor-th-sortable:hover {
  background: var(--color-border);
}

.mor-results-table th.mor-th-channel {
  width: var(--space-9);
  min-width: var(--space-9);
  max-width: var(--space-9);
  text-align: center;
}

.mor-th-filter-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  justify-content: center;
}

.mor-th-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-0-5);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--motion-duration-fast) ease;
}

.mor-th-filter-btn:hover {
  background: var(--color-bg-hover-light);
}

.mor-col-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
}

.mor-results-table th.mor-th-platform {
  width: var(--space-9);
  min-width: var(--space-9);
  max-width: var(--space-9);
  text-align: center;
}

.mor-results-table th.mor-th-metric {
  text-align: center;
  width: 1px;
}

.mor-th-flat {
  text-align: center;
}

.mor-td-flat {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mor-icon-btn-sm--active {
  color: var(--color-primary);
  border-radius: var(--radius-sm);
}

.mor-tab-btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mor-results-table td {
  padding: var(--space-sm) var(--space-lg);
  border-bottom: var(--space-px) solid var(--color-border);
  vertical-align: middle;
  background: var(--color-white);
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  white-space: nowrap;
  text-align: center;
}

.mor-results-table tbody tr:hover td {
  background: var(--color-bg-hover-light);
}

.mor-results-table td.mor-td-channel {
  padding: var(--space-sm) var(--space-xs) var(--space-sm) var(--space-lg);
  width: var(--space-9);
  min-width: var(--space-9);
  max-width: var(--space-9);
  text-align: center;
  white-space: normal;
  word-break: break-word;
}

.mor-results-table td.mor-td-platform {
  padding: var(--space-sm) var(--space-xs) var(--space-sm) var(--space-lg);
  width: var(--space-9);
  min-width: var(--space-9);
  max-width: var(--space-9);
  text-align: center;
  white-space: normal;
  word-break: break-word;
}



.mor-platform-name {
  display: block;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-body);
  font-size: var(--font-size-sm);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

.mor-channel-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-xs);
}

.mor-channel-name {
  display: block;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-body);
  font-size: var(--font-size-sm);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  flex: 1;
  min-width: 0;
}

.mor-linechart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 0;
  transition:
    color 0.15s,
    background 0.15s;
}

.mor-linechart-btn:hover {
  color: var(--color-primary);
  background: var(--color-section-icon-hover-bg);
}

/* ─── Icon column (dedicated narrow column for response curve icon) ── */
.mor-th-icon {
  width: var(--space-10);
  padding: var(--space-sm) var(--space-xs);
}

.mor-td-icon {
  width: var(--space-10);
  padding: var(--space-sm) var(--space-xs);
  text-align: center;
}

.mor-results-table td.mor-td-metric {
  padding: var(--space-sm) var(--space-xs) var(--space-sm) var(--space-md);
  width: 1px;
}

/* ─── Metric cell with bars ──────────────────────────────── */
.mor-metric-cell {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.mor-metric-cell--no-change {
  justify-content: flex-start;
}

.mor-bars-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-1875);
}

.mor-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.mor-bar-value {
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-body);
  white-space: nowrap;
  flex-shrink: 0;
  text-align: left;
  width: var(--space-12);
}

.mor-bar-track {
  width: var(--space-9);
  flex-shrink: 0;
  height: var(--space-2-5);
  background: var(--color-lightgrey);
  border-radius: var(--space-lg);
  overflow: hidden;
  cursor: default;
}

.mor-bar-fill {
  height: 100%;
  border-radius: var(--space-0-5);
  transition: width 0.3s ease;
}

.mor-bar-fill--teal {
  background: #00CAB8;
}

.mor-bar-fill--grey {
  background: #C8C8C8;
}

.mor-bar-row:hover .mor-bar-fill--teal,
.mor-results-table tbody tr:hover .mor-bar-fill--teal {
  background: #00CAB8;
  filter: brightness(1.1);
}

.mor-bar-row:hover .mor-bar-fill--grey,
.mor-results-table tbody tr:hover .mor-bar-fill--grey {
  background: #C8C8C8;
  filter: brightness(1.15);
}

.mor-bar-row:hover .mor-bar-track,
.mor-results-table tbody tr:hover .mor-bar-track {
  background: var(--color-border);
}

/* Bar hover tooltip */
.mor-bar-tooltip-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.mor-bar-tooltip-wrap[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--space-1-5));
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-tooltip-bg);
  color: var(--color-tooltip-text);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-base);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-tooltip);
}

.mor-bar-tooltip-wrap[data-tooltip]:hover::before {
  content: "";
  position: absolute;
  bottom: calc(100% + var(--space-px));
  left: 50%;
  transform: translateX(-50%);
  border: var(--space-1-2) solid transparent;
  border-top-color: var(--color-tooltip-bg);
  pointer-events: none;
  z-index: 100;
}

/* ─── Change Indicator ───────────────────────────────────── */
.mor-change-indicator {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  color: var(--color-text-muted);
  width: var(--space-20);
  flex-shrink: 0;
  text-align: right;
}

.mor-change-indicator--positive {
  color: #28a745;
}

.mor-change-indicator--negative {
  color: #dc3545;
}

.mor-change-indicator--empty {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}

/* ─── Toggle switch (pill style) ─────────────────────────── */
.mor-toggle-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.mor-toggle-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
}

.mor-toggle-switch {
  position: relative;
  display: inline-block;
  width: var(--space-2-25);
  height: var(--space-5);
  flex-shrink: 0;
}

.mor-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.mor-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--color-lightgrey);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background 0.2s;
  border: var(--space-px) solid var(--color-kpigrey);
}

.mor-toggle-slider::before {
  content: "";
  position: absolute;
  width: var(--space-3-5);
  height: var(--space-3-5);
  left: var(--space-0-1875);
  top: var(--space-0-1875);
  background: var(--color-text-placeholder);
  border-radius: 50%;
  transition: transform 0.2s;
}

.mor-toggle-input:checked + .mor-toggle-slider {
  background: var(--color-primary);
}

.mor-toggle-input:checked + .mor-toggle-slider::before {
  transform: translateX(var(--space-lg));
}

/* ─── Response Curve Modal ───────────────────────────────── */
.mor-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-backdrop-overlay);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mor-modal {
  background: var(--color-white);
  border-radius: var(--radius-md);
  width: min(72rem, 92vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 var(--space-5) var(--space-15) var(--color-shadow-tooltip);
  overflow: hidden;
}

.mor-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--space-px) solid var(--color-border);
  background: var(--color-lightgrey);
  flex-shrink: 0;
}

.mor-modal-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.mor-modal-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.mor-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition:
    background var(--motion-duration-fast),
    color var(--motion-duration-fast);
  padding: 0;
}

.mor-modal-close:hover {
  background: var(--color-bg-hover-light);
  color: var(--color-primary);
}

.mor-modal-body {
  overflow-y: auto;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mor-modal-chart-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
  margin-bottom: calc(var(--space-xs) * -1);
}
.mor-modal-chart-label--center {
  text-align: center;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1200px) {
  .mor-kpi-row {
    flex-wrap: wrap;
  }

  .mor-chart-row {
    grid-template-columns: 150px 1fr 70px;
  }
}

/* Below ~600px, flex-wrap's natural reflow depends on each card's own
   min-width vs. the exact remaining space, which can land on 1-per-row
   (a lot of dead space beside each card) as often as 2. Switch to an
   explicit 2-column grid so mobile always gets a predictable 2-and-2
   layout; an odd trailing card spans both columns instead of leaving an
   empty cell beside it. */
@media (max-width: 600px) {
  .mor-kpi-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .mor-kpi-row .kpi-card:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .mor-chart-row {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  .mor-chart-bar-wrap {
    height: 1.5rem;
  }

  .mor-table-actions {
    flex-wrap: wrap;
  }

  /* .mor-table-toolbar (Channel/Platform toggle + legend + view/download
     icons) is a single nowrap flex row with no responsive treatment at
     all — at narrow widths its combined content (toggle + 2 legend items
     + 2 icon buttons) overflows the card, cutting off the "Base" legend
     item and the download icon past the right edge. Let the toolbar wrap,
     with the legend/icons dropping to their own right-aligned row below
     the Channel/Platform toggle. */
  .mor-table-toolbar {
    flex-wrap: wrap;
    row-gap: var(--space-sm);
  }

  .mor-table-toolbar-right {
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1 0 100%;
  }
}

/* ─── Recap Constraints Modal ────────────────────────────── */
.mor-rc-modal {
  background: var(--color-white);
  border-radius: var(--radius-md);
  width: min(60rem, 95vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 var(--space-5) var(--space-15) var(--color-shadow-tooltip);
  overflow: hidden;
}

.mor-rc-info {
  border-bottom: var(--space-px) solid var(--color-border);
  display: flex;
  flex-direction: column;
  background: var(--color-lightgrey);
}

.mor-rc-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  padding: var(--space-sm) var(--space-lg);
  border-bottom: var(--space-px) solid var(--color-border);
}

.mor-rc-info-row:last-child {
  border-bottom: none;
}

.mor-rc-info-cell {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.mor-rc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-xl);
  height: var(--space-xl);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.mor-rc-info-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
}

.mor-rc-info-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
}

.mor-rc-info-value {
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
}

.mor-rc-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0;
  border-bottom: calc(var(--space-px) * 2) solid var(--color-border);
  padding: 0 var(--space-lg);
  flex-shrink: 0;
}

.mor-rc-tab {
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: calc(var(--space-px) * 2) solid transparent;
  margin-bottom: calc(var(--space-px) * -2);
  transition:
    color var(--motion-duration-fast),
    border-color var(--motion-duration-fast);
  font-family: var(--font-family-display);
}

.mor-rc-tab:hover {
  color: var(--color-primary);
}

.mor-rc-tab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.mor-rc-body {
  flex: 1;
  padding: var(--space-md) var(--space-lg);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Recap constraints modal DataTable should scroll within its own maxHeight */
.mor-rc-body .dt-inner-h {
  max-height: var(--dt-max-h, 260px);
}

/* Channel/Platform names must size to content on one line, not wrap; the
   table's existing horizontal scrollbar takes over if columns overflow. */
.mor-rc-body .dt-table td.mor-rc-td-nowrap {
  white-space: nowrap;
}


.mor-toggle-saving {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-left: var(--space-1-5);
  font-style: italic;
}
/* ─── Page Layout ────────────────────────────────────────── */
.moc-page {
  height: 100vh;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  padding-top: var(--space-10);
  /* Without this, the FilterBar's dropdown panel (position: absolute, up
     to --space-22 tall) can extend past this page's own 100vh box — since
     nothing here clips it, the browser adds a genuine page-level scrollbar
     to reveal the overflow the moment the panel opens, on top of
     .moc-body's own CustomScrollbar. .um-page already has this; the other
     pages using FilterBar were missing it. */
  overflow: hidden;
}

.moc-page .app-tabs-wrapper {
  position: static;
}

.moc-page .fb-wrapper {
  position: relative;
  top: 0;
  background: var(--color-white);
  border-bottom: none;
  margin: 0;
}

.moc-filter-divider {
  height: var(--space-px);
  background: var(--color-kpigrey);
  margin: 0 var(--space-lg);
}

.moc-body {
  flex: 1;
  min-height: 0;
}

.moc-body-content {
  padding: var(--space-md) var(--space-lg) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ─── Breadcrumb ─────────────────────────────────────────── */
.moc-breadcrumb-bar {
  padding: 0 var(--space-lg);
}

.moc-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.moc-breadcrumb-item {
  color: var(--color-text-muted);
}
.moc-breadcrumb-link {
  cursor: pointer;
  transition: color var(--motion-duration-fast);
}
.moc-breadcrumb-link:hover {
  color: var(--color-primary);
}
.moc-breadcrumb-sep {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
}
.moc-breadcrumb-active {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

/* ─── Icon button ────────────────────────────────────────── */
.moc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  border: none;
  background: none;
  color: var(--color-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition:
    background var(--motion-duration-fast),
    color var(--motion-duration-fast);
  padding: 0;
}

.moc-icon-btn:hover {
  background: var(--color-bg-hover-light);
  color: var(--color-primary);
}

.moc-icon-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-1-5) var(--space-3-5);
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text-body);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-display);
  cursor: pointer;
  transition:
    background var(--motion-duration-fast),
    border-color var(--motion-duration-fast);
}

.moc-icon-btn-outline:hover {
  background: var(--color-bg-hover-light);
  border-color: var(--color-primary);
}

/* ─── Section (Insights) ─────────────────────────────────── */
.moc-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.moc-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-md) var(--space-md);
  background: var(--color-section-header-bg);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: background var(--motion-duration-fast) ease;
}

.moc-section-header:hover {
  background: var(--color-section-header-bg-hover);
}

.moc-section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.moc-section-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.moc-section-chevron {
  display: flex;
  align-items: center;
  color: var(--color-primary);
  transition: transform var(--motion-duration-normal);
}

.moc-section-chevron--open {
  transform: rotate(180deg);
}

.moc-section-body {
  padding: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

/* ─── Insight Cards ──────────────────────────────────────── */
.moc-insight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.moc-insight-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.moc-insight-text {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  line-height: var(--line-height-relaxed);
}

/* ─── Title ──────────────────────────────────────────────── */
.moc-comparison-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: 0;
}

/* ─── Toolbar ────────────────────────────────────────────── */
.moc-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.moc-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.moc-view-toggle {
  display: flex;
  align-items: center;
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  width: fit-content;
  padding: var(--space-0-5);
}

.moc-tab-btn {
  padding: var(--space-1-5) var(--space-lg);
  border: none;
  background: transparent;
  color: var(--color-text-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-display);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition:
    background var(--motion-duration-fast),
    color var(--motion-duration-fast);
}

.moc-tab-btn--icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.moc-tab-btn:hover {
  background: var(--color-lightgrey);
}
.moc-tab-btn--active {
  background: var(--color-primary);
  color: var(--color-white);
}
.moc-tab-btn--active:hover {
  background: var(--color-navbar);
}
.moc-tab-btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── Table wrap ─────────────────────────────────────────── */
.moc-table-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
}

.moc-table-inner {
  overflow-x: auto;
  width: 100%;
}

/* ─── Table base ─────────────────────────────────────────── */
.moc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  background: var(--color-white);
}

/* ── Header row 1 — Scenario Type ── */
.moc-thead-type th {
  padding: var(--space-md) var(--space-md);
  background: var(--color-tablegrey);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

/* ── Header row 2 — Scenario Name ── */
.moc-thead-name th {
  padding: var(--space-md) var(--space-md);
  background: var(--color-tablegrey);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

/* ── Header row 3 — Metric columns (auto-generated by DataTable) ── */
.moc-datatable-wrap .dt-table thead tr:last-child th {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-lightgrey);
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
  border-bottom: calc(var(--space-px) * 2) solid var(--color-border);
  white-space: nowrap;
}

/* ── Scenario group left border ── */
.moc-th-group-border,
.moc-td-group-border {
  border-left: 2px solid var(--color-border);
}

.moc-th-metric-cell {
  min-width: 110px;
}

/* ─── Table body ─────────────────────────────────────────── */
.moc-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-body);
  font-size: var(--font-size-sm);
}

.moc-table tbody tr:hover {
  background: var(--color-bg-hover-light);
}

.moc-td-value {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ─── DataTable wrapper ──────────────────────────────────── */
.moc-datatable-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/*
 * Sticky header + sticky columns together:
 * DataTable.css uses `thead tr { position: sticky; top: 0 }` for vertical
 * stickiness, but a sticky tr prevents its th children from being sticky
 * horizontally. Fix: make thead itself sticky (supported in all modern
 * browsers), reset tr to static so th cells can independently stick left.
 */
.moc-datatable-wrap .dt-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}
.moc-datatable-wrap .dt-table thead tr {
  position: static;
}

/* Column filter dropdown height is sized inline (MediaOptimisationComparison.tsx,
   passed to CustomScrollbar's maxHeight prop). Don't give .dt-multi-list/.csb-content
   their own max-height + overflow-y:auto here — that creates a second native scroll
   region nested inside CustomScrollbar's own, so the custom thumb stops short of the
   list's real scroll range. */


/* Sticky fixed columns in header */
.moc-datatable-wrap .dt-table thead th.moc-th-fixed {
  position: sticky;
  background: var(--color-lightgrey);
  z-index: 11;
  text-align: center;
  vertical-align: middle;
  border-right: calc(var(--space-px) * 2) solid var(--color-border);
}

.moc-datatable-wrap .dt-table thead th.moc-th-channel-cell {
  left: 0;
  min-width: 160px;
  max-width: 160px;
}

.moc-datatable-wrap .dt-table thead th.moc-th-platform-cell {
  left: 160px;
  min-width: 160px;
  max-width: 160px;
}

/* Sticky fixed columns in body */
.moc-datatable-wrap .dt-table tbody td.moc-td-fixed {
  position: sticky;
  background: var(--color-white);
  z-index: 5;
  border-right: calc(var(--space-px) * 2) solid var(--color-border);
  font-weight: var(--font-weight-regular);
}

.moc-datatable-wrap .dt-table tbody td.moc-td-channel {
  left: 0;
  min-width: 160px;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.moc-datatable-wrap .dt-table tbody td.moc-td-platform {
  left: 160px;
  min-width: 160px;
  max-width: 160px;
}

.moc-datatable-wrap .dt-table tbody tr:hover td.moc-td-fixed {
  background: var(--color-bg-hover-light);
}

/* Multi-line renderHeader() — 3 stacked lines per metric column */
.moc-th-multi {
  display: flex;
  flex-direction: column;
  gap: var(--space-px);
  padding: var(--space-0-5) 0;
  min-width: 0;
}

/* Left border = new scenario group */
.moc-th-group-border {
  border-left: calc(var(--space-px) * 2) solid var(--color-border);
  padding-left: var(--space-xs);
  margin-left: calc(var(--space-xs) * -1);
}

/* Row 1 — scenario type */
.moc-th-type-lbl {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--line-height-normal);
}

/* Row 2 — scenario name */
.moc-th-name-lbl {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--line-height-normal);
}

/* Invisible spacers keep height consistent across all columns in a group */
.moc-th-hidden {
  visibility: hidden;
  pointer-events: none;
}

/* Row 3 — metric name, separated by top border */
.moc-th-metric-lbl {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
  white-space: nowrap;
  line-height: var(--line-height-normal);
  margin-top: var(--space-0-8);
  padding-top: var(--space-0-8);
  border-top: var(--space-px) solid var(--color-border);
}

/* ─── Selected scenario highlight ───────────────────────── */
.moc-datatable-wrap .dt-table tbody td.moc-td-selected {
  background: var(--color-tablegrey);
}
.moc-datatable-wrap .dt-table tbody tr:hover td.moc-td-selected {
  background: var(--color-bg-hover-light);
}

/* ─── Cell value with inline change ─────────────────────── */
.moc-cell-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  white-space: nowrap;
}

.moc-change-inline {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
}

.moc-change-inline--positive { color: var(--color-success); }
.moc-change-inline--negative { color: var(--color-error); }
.moc-change-inline--neutral  { color: var(--color-text-placeholder); }

/* ─── Channel header filter wrap ────────────────────────── */
.moc-th-filter-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.moc-col-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
}

/* ─── Table footer ───────────────────────────────────────── */
.moc-table-footer {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-sm) var(--space-lg);
  border-top: 1px solid var(--color-border);
  background: var(--color-lightgrey);
}

/* ─── Charts view ────────────────────────────────────────── */
.moc-charts-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.moc-kpi-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.moc-kpi-group-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-primary);
  width: fit-content;
}

.moc-kpi-row {
  display: flex;
  gap: var(--space-md);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.moc-kpi-row::-webkit-scrollbar {
  display: none;
}

.moc-kpi-row .kpi-card {
  min-width: var(--space-35);
  flex: 1 0 var(--space-35);
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1200px) {
  .moc-insight-grid {
    grid-template-columns: 1fr;
  }
  .moc-th-metric-cell {
    min-width: 90px;
  }
  .moc-kpi-row {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .moc-toolbar-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  .moc-kpi-row {
    flex-wrap: wrap;
  }
}

/* Below ~600px, flex-wrap's natural reflow depends on each card's own
   min-width vs. the exact remaining space, which can land on 1-per-row
   (a lot of dead space beside each card) as often as 2. Switch to an
   explicit 2-column grid so mobile always gets a predictable 2-and-2
   layout; an odd trailing card spans both columns instead of leaving an
   empty cell beside it. */
@media (max-width: 600px) {
  .moc-kpi-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .moc-kpi-row .kpi-card:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
}
/*$vite$:1*/