/* Workspace-wide viewport safety and shared Brain surfaces. */
html[data-trygc-page],
html[data-trygc-page] body,
html[data-trygc-page] #root {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

html[data-trygc-page] :where(main, section, article, aside, header, footer, nav, div, form) {
  min-width: 0;
}

html[data-trygc-page] :where(img, video, canvas) {
  max-width: 100%;
  height: auto;
}

html[data-trygc-page] :where(pre, .overflow-x-auto, [class*="overflow-x-auto"]) {
  max-width: 100%;
}

html[data-trygc-page="index"] #root > div:first-child,
html[data-trygc-page="index"] #root main,
html[data-trygc-page="index"] #root main > div {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

html[data-trygc-page="index"] #root main {
  overflow-x: hidden;
}

/* LIVE campaign cards: status gradients must follow the active semantic surface. */
:root.dark .perf-final .pf-campaign-card,
:root[data-theme="dark"] .perf-final .pf-campaign-card {
  background: var(--gcui-surface) !important;
  border-color: var(--gcui-border) !important;
  color: var(--gcui-text) !important;
}

:root.dark .perf-final .pf-campaign-card :where(.pf-stat, .pf-action-btn),
:root[data-theme="dark"] .perf-final .pf-campaign-card :where(.pf-stat, .pf-action-btn) {
  background: var(--gcui-surface-2) !important;
  border-color: var(--gcui-border) !important;
  color: var(--gcui-text) !important;
}

:root.dark .perf-final .pf-campaign-card :where(.pf-campaign-title, .pf-meta, .pf-card-footer, .pf-bar-row),
:root[data-theme="dark"] .perf-final .pf-campaign-card :where(.pf-campaign-title, .pf-meta, .pf-card-footer, .pf-bar-row) {
  color: var(--gcui-text) !important;
}

:root.dark [data-route="performance"] .perf-final .pf-campaign-card.critical,
:root[data-theme="dark"] [data-route="performance"] .perf-final .pf-campaign-card.critical {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gcui-danger) 11%, var(--gcui-surface)), var(--gcui-surface) 62%) !important;
  border-color: color-mix(in srgb, var(--gcui-danger) 34%, var(--gcui-border)) !important;
  color: var(--gcui-text) !important;
}

:root.dark [data-route="performance"] .perf-final .pf-campaign-card.at-risk,
:root[data-theme="dark"] [data-route="performance"] .perf-final .pf-campaign-card.at-risk {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gcui-warning) 11%, var(--gcui-surface)), var(--gcui-surface) 62%) !important;
  border-color: color-mix(in srgb, var(--gcui-warning) 34%, var(--gcui-border)) !important;
  color: var(--gcui-text) !important;
}

:root.dark [data-route="performance"] .perf-final .pf-campaign-card.on-track,
:root[data-theme="dark"] [data-route="performance"] .perf-final .pf-campaign-card.on-track {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gcui-success) 11%, var(--gcui-surface)), var(--gcui-surface) 62%) !important;
  border-color: color-mix(in srgb, var(--gcui-success) 32%, var(--gcui-border)) !important;
  color: var(--gcui-text) !important;
}

:root.dark [data-route="performance"] .perf-final .pf-campaign-card.done,
:root[data-theme="dark"] [data-route="performance"] .perf-final .pf-campaign-card.done {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gcui-secondary) 12%, var(--gcui-surface)), var(--gcui-surface) 62%) !important;
  border-color: color-mix(in srgb, var(--gcui-secondary) 32%, var(--gcui-border)) !important;
  color: var(--gcui-text) !important;
}

:root.dark [data-route="performance"] .perf-final .pf-campaign-card :where(.pf-stat, .pf-action-btn),
:root[data-theme="dark"] [data-route="performance"] .perf-final .pf-campaign-card :where(.pf-stat, .pf-action-btn) {
  background: var(--gcui-surface-2) !important;
  border-color: var(--gcui-border) !important;
  color: var(--gcui-text) !important;
  box-shadow: var(--gcui-shadow-sm) !important;
}

:root.dark [data-route="performance"] .perf-final .pf-campaign-card :where(.pf-campaign-title, .pf-meta, .pf-card-footer, .pf-bar-row),
:root[data-theme="dark"] [data-route="performance"] .perf-final .pf-campaign-card :where(.pf-campaign-title, .pf-meta, .pf-card-footer, .pf-bar-row) {
  color: var(--gcui-text) !important;
}

:where([data-trygc-page="brain"], html[data-trygc-page="index"] body:has([class*="Brain"], [class*="brain"])) :where(textarea, input, select) {
  border-color: var(--gcui-border-strong) !important;
  background: var(--gcui-surface-2) !important;
  color: var(--gcui-text) !important;
}

:where([data-trygc-page="brain"], html[data-trygc-page="index"] body:has([class*="Brain"], [class*="brain"])) :where(button, [role="button"]) {
  border-radius: var(--gcui-radius-sm) !important;
}

:where([data-trygc-page="brain"], html[data-trygc-page="index"] body:has([class*="Brain"], [class*="brain"])) :where(.bg-background, .bg-card, .bg-white, .dark\:bg-slate-900, .dark\:bg-slate-800) {
  background-color: var(--gcui-surface) !important;
  color: var(--gcui-text) !important;
}

:where([data-trygc-page="brain"], html[data-trygc-page="index"] body:has([class*="Brain"], [class*="brain"])) :where(.bg-muted, .bg-secondary, .bg-slate-50, .bg-slate-100) {
  background-color: var(--gcui-surface-2) !important;
}

:where([data-trygc-page="brain"], html[data-trygc-page="index"] body:has([class*="Brain"], [class*="brain"])) :where(.border, .border-border, .border-slate-100, .border-slate-200, .dark\:border-slate-700, .dark\:border-slate-800) {
  border-color: var(--gcui-border) !important;
}

:where([data-trygc-page="brain"], html[data-trygc-page="index"] body:has([class*="Brain"], [class*="brain"])) :where(.text-foreground, .text-slate-700, .text-slate-800, .text-slate-900, .dark\:text-white) {
  color: var(--gcui-text) !important;
}

:where([data-trygc-page="brain"], html[data-trygc-page="index"] body:has([class*="Brain"], [class*="brain"])) :where(.text-muted-foreground, .text-slate-400, .text-slate-500, .text-slate-600) {
  color: var(--gcui-text-3) !important;
}

@media (max-width: 1024px) {
  html[data-trygc-page="index"] #root main {
    padding-inline: min(3vw, 18px);
  }
}

@media (max-width: 640px) {
  html[data-trygc-page="index"] #root main {
    padding-inline: 10px;
  }
}