/*
  Final theme normalization layer.
  Keep Bootstrap utility classes and late component fallbacks from leaking
  default blue/indigo into themed light and dark workspaces.
*/
:root {
  --rv-theme-action: var(--accent, #2f9e8f);
  --rv-theme-action-rgb: var(--accent-rgb, 47, 158, 143);
  --rv-theme-action-hover: color-mix(in srgb, var(--rv-theme-action) 86%, #000 14%);
  --rv-theme-action-soft: color-mix(in srgb, var(--rv-theme-action) 12%, var(--surface, #fff) 88%);
  --rv-theme-action-border: color-mix(in srgb, var(--rv-theme-action) 38%, transparent);
  --rv-theme-action-text: color-mix(in srgb, var(--rv-theme-action) 58%, #0f172a 42%);
  --btn-brand: var(--rv-theme-action);
  --btn-brand-rgb: var(--rv-theme-action-rgb);
  --color-btn-bg: var(--rv-theme-action);
  --color-nav-active: var(--rv-theme-action);
  --bs-primary: var(--rv-theme-action);
  --bs-primary-rgb: var(--rv-theme-action-rgb);
  --bs-link-color: var(--rv-theme-action);
  --bs-link-hover-color: var(--rv-theme-action-hover);
}

.dark-mode {
  --rv-theme-action: var(--accent, #55c7b2);
  --rv-theme-action-rgb: var(--accent-rgb, 85, 199, 178);
  --rv-theme-action-hover: color-mix(in srgb, var(--rv-theme-action) 82%, #fff 18%);
  --rv-theme-action-soft: color-mix(in srgb, var(--surface-2, #18263b) 80%, var(--rv-theme-action) 20%);
  --rv-theme-action-border: color-mix(in srgb, var(--rv-theme-action) 44%, transparent);
  --rv-theme-action-text: color-mix(in srgb, var(--rv-theme-action) 68%, #f8fbff 32%);
  --btn-brand: var(--rv-theme-action);
  --btn-brand-rgb: var(--rv-theme-action-rgb);
  --color-btn-bg: var(--rv-theme-action);
  --color-nav-active: var(--rv-theme-action);
}

.btn-primary,
.btn-success,
.btn-themed,
.save-bar .btn-primary,
.surface-panel .btn-primary,
.surface-panel .btn-success,
.page-shell .btn-primary,
.page-shell .btn-success,
.btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:active,
.show > .btn-outline-primary.dropdown-toggle {
  background: linear-gradient(180deg, color-mix(in srgb, var(--rv-theme-action) 94%, #fff 6%), var(--rv-theme-action-hover)) !important;
  border-color: var(--rv-theme-action-hover) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(var(--rv-theme-action-rgb), 0.18) !important;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-success:hover,
.btn-success:focus-visible,
.btn-themed:hover,
.btn-themed:focus-visible,
.save-bar .btn-primary:hover,
.save-bar .btn-primary:focus-visible {
  background: linear-gradient(180deg, var(--rv-theme-action), var(--rv-theme-action-hover)) !important;
  border-color: var(--rv-theme-action-hover) !important;
  color: #fff !important;
}

.btn-outline-primary {
  background: color-mix(in srgb, var(--rv-theme-action-soft) 76%, transparent) !important;
  border-color: var(--rv-theme-action-border) !important;
  color: var(--rv-theme-action-text) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
  background: var(--rv-theme-action-soft) !important;
  border-color: var(--rv-theme-action) !important;
  color: var(--rv-theme-action-text) !important;
}

.text-primary,
.link-primary,
.bi.text-primary,
.fas.text-primary,
.far.text-primary,
.fa.text-primary {
  color: var(--rv-theme-action-text) !important;
}

.bg-primary,
.text-bg-primary,
.badge.bg-primary,
.badge.text-bg-primary,
.progress-bar.bg-primary,
.progress-bar:not([class*="bg-"]) {
  background-color: var(--rv-theme-action) !important;
  color: #fff !important;
}

.bg-primary-subtle,
.badge.bg-primary-subtle,
.alert-primary {
  background-color: var(--rv-theme-action-soft) !important;
  border-color: var(--rv-theme-action-border) !important;
  color: var(--rv-theme-action-text) !important;
}

.nav-pills .nav-link.active,
.nav-tabs .nav-link.active,
.nav-link.active[data-bs-toggle="pill"],
.nav-link.active[data-bs-toggle="tab"] {
  background: var(--rv-theme-action-soft) !important;
  border-color: var(--rv-theme-action-border) !important;
  color: var(--rv-theme-action-text) !important;
  box-shadow: 0 8px 18px rgba(var(--rv-theme-action-rgb), 0.12) !important;
}

.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus-visible,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus-visible {
  background: color-mix(in srgb, var(--rv-theme-action-soft) 82%, var(--rv-theme-action) 18%) !important;
  color: var(--rv-theme-action-text) !important;
}

.border-primary,
.border-primary-subtle {
  border-color: var(--rv-theme-action-border) !important;
}

.wf-template-card:focus-visible,
.wf-template-card:hover,
.wf-version-card.is-current,
.wf-dryrun-step--branch {
  border-color: var(--rv-theme-action) !important;
}

.wf-template-card__icon,
.wf-dryrun-step__index {
  background: var(--rv-theme-action-soft) !important;
  color: var(--rv-theme-action-text) !important;
}

.wf-version-card.is-current,
.dark-mode .wf-version-card.is-current {
  background: var(--rv-theme-action-soft) !important;
}

#content.admin-search-compact-results .admin-section-panel {
  min-height: 0 !important;
}

#content.admin-search-compact-results .admin-dashboard-grid {
  align-items: start !important;
  grid-auto-rows: auto !important;
}

#content.admin-search-compact-results .admin-card {
  min-height: 0 !important;
}

#content.admin-search-compact-results .admin-search-empty-state {
  margin-block: 1rem !important;
}

#content.admin-search-no-results {
  min-height: 0 !important;
  padding-bottom: 2rem !important;
}

#content.admin-search-no-results .admin-search-empty-state {
  max-width: 64rem;
  margin: 1rem auto !important;
}

#content.admin-search-no-results .admin-section-jump {
  display: none !important;
}

/* Keep Bootstrap/native checkbox and radio controls on the active Run-Via theme.
   A broad base reset lets native browser blue leak through on some pages; this
   restores Bootstrap's custom control rendering for .form-check-input while
   preserving accent-color for plain checkboxes/radios. */
.form-check-input {
  --bs-form-check-bg: var(--surface, #fff);
  --bs-form-check-bg-image: none;
  --bs-form-check-border-color: color-mix(in srgb, var(--accent, #14b8a6) 42%, var(--border, #cbd5e1) 58%);
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  border-color: color-mix(in srgb, var(--accent, #14b8a6) 42%, var(--border, #cbd5e1) 58%) !important;
  background-color: var(--bs-form-check-bg) !important;
  color-adjust: exact;
  print-color-adjust: exact;
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--accent, #14b8a6) !important;
  border-color: var(--accent, #14b8a6) !important;
}

.form-check-input[type="checkbox"]:checked:not([role="switch"]) {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  background-image: var(--bs-form-check-bg-image) !important;
}

.form-check-input[type="radio"]:checked {
  background-image: var(--bs-form-check-bg-image) !important;
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-input:focus,
.form-check-input:focus-visible {
  border-color: color-mix(in srgb, var(--accent, #14b8a6) 70%, #fff 30%) !important;
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--accent, #14b8a6) 24%, transparent) !important;
}

.form-switch .form-check-input:checked {
  background-color: var(--accent, #14b8a6) !important;
  border-color: var(--accent, #14b8a6) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: right center !important;
}

.form-switch .form-check-input:not(:checked) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,.25)'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: left center !important;
}

.dark-mode .form-check-input {
  --bs-form-check-bg: var(--surface-2, #18263b);
  border-color: color-mix(in srgb, var(--accent, #5eead4) 46%, rgba(203,213,225,.42) 54%) !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent, #14b8a6) !important;
}

.instructions-search-scope,
.instructions-search-scope > [class*="col-"],
.instructions-step-list,
.instructions-step-card,
.instructions-action-card,
.instructions-note-card,
.instructions-mini-card,
.instructions-reference-card,
.instructions-reference-link,
.instructions-walkthrough-steps li {
  min-width: 0 !important;
  max-width: 100% !important;
}

.instructions-step-card,
.instructions-mini-card,
.instructions-reference-card,
.instructions-reference-link {
  overflow-wrap: anywhere !important;
}

.instructions-step-card > div:last-child,
.instructions-mini-card > *,
.instructions-reference-card > *,
.instructions-reference-link > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

.instructions-illustration {
  max-width: 100% !important;
  overflow-x: auto !important;
}

.instructions-illustration *,
.instructions-illustration svg,
.instructions-illustration img {
  max-width: 100% !important;
}

@media (max-width: 575.98px) {
  .instructions-search-scope.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .instructions-search-scope.row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .instructions-step-card {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 0.75rem !important;
  }

  .instructions-step-card__index {
    flex: 0 0 auto !important;
  }
}

.request-live-indicator::before {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #2f9e8f) 28%, transparent) !important;
}

@keyframes request-live-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #2f9e8f) 28%, transparent); }
  70% { box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--accent, #2f9e8f) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #2f9e8f) 0%, transparent); }
}

/* Theme picker hardening: the real select remains the form value, but the
   visible Run-Via picker owns pointer interaction so Bootstrap/native blue
   controls cannot leak back into the UI. */
.theme-picker {
  position: relative;
}

.theme-picker__native-select-wrap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.theme-picker__native-select {
  width: 1px;
  height: 1px;
  min-height: 1px;
}

.theme-picker:focus-within .theme-picker__trigger {
  border-color: color-mix(in srgb, var(--accent, #14b8a6) 62%, var(--btn-surface-border, rgba(22,34,49,.18)));
  box-shadow: 0 0 0 .22rem var(--focus, rgba(20,184,166,.22));
}

.theme-picker__trigger {
  min-height: 3.75rem;
}

.trial-billing-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md, 1rem);
  border-color: color-mix(in srgb, var(--accent, #14b8a6) 28%, rgba(148, 163, 184, .22));
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--accent, #14b8a6) 10%, transparent) 0, transparent 34%),
    var(--surface-raised, #fff);
}

.trial-billing-nudge__title {
  color: var(--body-text, #132033);
  font-weight: 800;
  font-size: 1.04rem;
  line-height: 1.25;
  margin: .25rem 0 .15rem;
}

.trial-billing-nudge .btn {
  flex: 0 0 auto;
}

.dark-mode .trial-billing-nudge {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--accent, #5eead4) 16%, transparent) 0, transparent 38%),
    var(--surface, #122034);
}

@media (max-width: 700px) {
  .trial-billing-nudge {
    align-items: stretch;
    flex-direction: column;
  }

  .trial-billing-nudge .btn {
    width: 100%;
  }
}

/* Admin dark-mode hardening: Bootstrap light utilities are convenient in
   templates, but inside Run-Via builder/admin surfaces they must inherit the
   workspace theme instead of creating bleached white cards. */
.template-starter-card {
  display: grid;
  gap: 1rem;
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--border, rgba(148, 163, 184, .24));
  border-radius: 1rem;
  background: var(--surface-raised, #fff);
  color: var(--body-text, #132033);
}

.template-starter-card__title {
  color: var(--body-text, #132033);
  font-weight: 800;
}

.template-starter-card__text,
.template-starter-card__meta,
.template-starter-card__list,
.template-starter-card__hint,
.template-starter-panel__lede {
  color: var(--body-text-muted, #64748b);
}

.template-starter-card__list li {
  color: inherit;
}

.dark-mode .surface-panel .bg-body,
.dark-mode .surface-panel .bg-light,
.dark-mode .surface-panel .bg-light-subtle,
.dark-mode .surface-panel .bg-body-tertiary,
.dark-mode .surface-panel .bg-body-secondary {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2, #1d2d42) 94%, rgba(255,255,255,.06) 6%), color-mix(in srgb, var(--surface, #122034) 92%, #000 8%)) !important;
  border-color: rgba(145, 160, 184, .28) !important;
  color: var(--body-text, #e5eef8) !important;
}

.dark-mode .surface-panel .bg-body .text-muted,
.dark-mode .surface-panel .bg-light .text-muted,
.dark-mode .surface-panel .bg-light-subtle .text-muted,
.dark-mode .surface-panel .bg-body-tertiary .text-muted,
.dark-mode .surface-panel .bg-body-secondary .text-muted {
  color: var(--body-text-muted, #a8b5c8) !important;
}

.dark-mode .surface-panel .text-bg-light.border,
.dark-mode .template-starter-card .text-bg-light.border {
  background: rgba(148, 163, 184, .16) !important;
  border-color: rgba(145, 160, 184, .28) !important;
  color: var(--body-text, #e5eef8) !important;
}

.dark-mode .template-starter-card {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--accent, #5eead4) 10%, transparent) 0, transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2, #1d2d42) 94%, rgba(255,255,255,.05) 6%), color-mix(in srgb, var(--surface, #122034) 92%, #000 8%));
  border-color: rgba(145, 160, 184, .30);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .24);
  color: var(--body-text, #e5eef8);
}

.dark-mode .template-starter-card__title {
  color: var(--body-text, #f8fbff);
}

.dark-mode .template-starter-card__text,
.dark-mode .template-starter-card__meta,
.dark-mode .template-starter-card__list,
.dark-mode .template-starter-card__hint,
.dark-mode .template-starter-panel__lede {
  color: var(--body-text-muted, #b7c4d8);
}