/* OP INTEL Development / Sandbox Theme v1
   Approved 2026-09-26. Development frontend only.
   Production palette remains unchanged. */

:root {
  --dev-bg: #F7F8FF;
  --dev-blue: #2563EB;
  --dev-blue-hover: #1D4ED8;
  --dev-blue-soft: #EFF6FF;
  --dev-blue-ring: rgba(37, 99, 235, .14);
  --warm: #F7F8FF;
  --line: #E1E7F0;
  --soft: #F2F5FA;
  --muted: #667085;
  --green: #169B62;
  --accent: #2563EB;
  --border: #E1E7F0;
  --text-muted: #667085;
}

html, body, #root, .app-shell, .app-main, .full-page-state {
  background: var(--dev-bg);
}

/* Keep the approved OP #111111 sidebar while making environment state unmistakable. */
.sidebar { background: #111111; }
.brand-row strong {
  font-size: 12.5px;
  letter-spacing: .035em;
  white-space: nowrap;
}
.nav-link.active,
.nav-link.active-group,
.op-nav-parent-active,
.op-nav-parent-active:hover,
.op-nav-parent-active:focus,
.op-nav-parent-active:focus-visible {
  box-shadow: inset 4px 0 0 var(--dev-blue) !important;
}
.subnav-link.active { color: #93C5FD; }

/* Bright, calm sandbox work surface based on the user-approved reference color. */
.topbar {
  background: rgba(247, 248, 255, .96);
  border-bottom-color: var(--line);
}
.search-shell, .icon-button, .metric-card, .panel, .stage-card,
.workspace-intro-card, .load-workspace-hero, .growth-builder-step-card,
.growth-builder-eligibility-preview {
  border-color: var(--line);
}
.metric-card, .panel {
  box-shadow: 0 7px 22px rgba(30, 64, 175, .035);
}

/* Blue is the Development structural accent. */
.eyebrow { color: var(--dev-blue); }
.live-indicator { color: var(--dev-blue); }
.live-indicator i {
  background: var(--dev-blue);
  box-shadow: 0 0 0 4px var(--dev-blue-ring);
}
.primary-button,
.dispatch-primary-button {
  background: var(--dev-blue);
  border-color: var(--dev-blue);
  color: #fff;
}
.primary-button:hover:not(:disabled),
.dispatch-primary-button:hover:not(:disabled) {
  background: var(--dev-blue-hover);
  border-color: var(--dev-blue-hover);
}
.secondary-button:hover:not(:disabled),
.icon-button:hover {
  border-color: #9DBAF8;
  color: var(--dev-blue);
}
.search-shell:focus-within,
.login-card input:focus,
.dispatch-input:focus,
.dispatch-textarea:focus {
  border-color: var(--dev-blue) !important;
  box-shadow: 0 0 0 3px var(--dev-blue-ring);
}

/* Structural selections use Development blue; semantic errors/warnings/success remain red/amber/green. */
.dispatch-filter.active,
.workspace-tab.active,
.owner-controls-tab.active,
.owner-tab.active {
  border-color: var(--dev-blue) !important;
}

/* Development rail: same black OP chrome, blue sandbox identity. */
#op-development-environment-banner {
  border-bottom-color: var(--dev-blue) !important;
}
#op-development-environment-banner strong { color: #93C5FD !important; }

/* Avoid warm Production tint leaking into neutral foundation surfaces. */
.foundation-placeholder,
.embedded-step,
.live-assist-environment-edit,
.growth-sequence-stop-rules,
.growth-template-boundary {
  border-color: var(--line);
}

/* Development role simulator — Owner Admin only, Development only. */
.dev-role-simulator {
  margin: auto 12px 10px;
  padding: 11px;
  border: 1px solid rgba(147, 197, 253, .28);
  border-radius: 10px;
  background: rgba(37, 99, 235, .08);
}
.dev-role-simulator-heading { display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px; }
.dev-role-simulator-heading strong { color:#FFFFFF;font-size:11px;letter-spacing:.03em; }
.dev-role-simulator-heading span { color:#93C5FD;font-size:9px;text-transform:uppercase;letter-spacing:.07em;font-weight:800; }
.dev-role-simulator label { display:block;margin-top:7px; }
.dev-role-simulator label > span { display:block;color:#AAB4C4;font-size:9px;text-transform:uppercase;letter-spacing:.07em;font-weight:800;margin-bottom:4px; }
.dev-role-simulator select {
  width:100%;
  border:1px solid rgba(147,197,253,.32);
  border-radius:7px;
  background:#171B23;
  color:#FFFFFF;
  padding:7px 8px;
  font:inherit;
  font-size:11px;
  outline:none;
}
.dev-role-simulator select:focus { border-color:#60A5FA;box-shadow:0 0 0 2px rgba(37,99,235,.22); }
.dev-role-simulator select:disabled { opacity:.6;cursor:not-allowed; }
.dev-role-return {
  width:100%;
  margin-top:9px;
  border:1px solid #60A5FA;
  border-radius:7px;
  background:#2563EB;
  color:#FFFFFF;
  padding:7px 8px;
  font:inherit;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}
.dev-role-return:hover { background:#1D4ED8; }
.dev-role-simulator-error { display:block;margin-top:7px;color:#FCA5A5;font-size:9px;line-height:1.35; }
.dev-role-simulator + .sidebar-footer { margin-top: 0; }