/* Bootstrap utility harmonization for portal, console, marketing, and status pages.
   Keeps Bootstrap classes readable in both light and dark themes. */

html[data-p67-theme] :where(.bg-white, .bg-light, .bg-body, .bg-body-tertiary, .alert-light, .text-bg-light) {
  background-color: var(--p67-surface, var(--p67-surface-1)) !important;
  border-color: var(--p67-border) !important;
  color: var(--p67-text, var(--p67-ink)) !important;
}

html[data-p67-theme] :where(.text-dark, .text-black) {
  color: var(--p67-text, var(--p67-ink)) !important;
}

html[data-p67-theme] :where(.text-muted, .text-body-secondary, .form-text) {
  color: var(--p67-text-muted, var(--p67-ink-muted)) !important;
}

html[data-p67-theme] :where(code, kbd, pre, .code-block, .font-monospace) {
  background: var(--p67-surface-2) !important;
  border-color: var(--p67-border) !important;
  color: var(--p67-text, var(--p67-ink)) !important;
}

html[data-p67-theme] :where(code, kbd, .font-monospace) {
  border-radius: var(--p67-radius-sm);
  overflow-wrap: anywhere;
}

html[data-p67-theme] :where(pre, .code-block) {
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  max-height: 34rem;
  overflow: auto;
  padding: .875rem;
  white-space: pre-wrap;
  word-break: break-word;
}

html[data-p67-theme] :where(.badge, .status-pill, .neutral-pill) {
  align-items: center;
  display: inline-flex;
  gap: .25rem;
  line-height: 1.1;
  max-width: 100%;
  white-space: normal;
}

html[data-p67-theme] :where(.btn, .p67-btn, button.button) {
  align-items: center;
  display: inline-flex;
  gap: .375rem;
  justify-content: center;
}

/* Marketing CTAs: drop Bootstrap's default primary blue/radius so stacked
   btn + p67-btn-primary classes resolve to the brand token look. */
html[data-p67-theme] :where(.btn.p67-btn-primary, .btn.btn-primary.p67-btn) {
  --bs-btn-bg: var(--p67-brand);
  --bs-btn-border-color: var(--p67-brand);
  --bs-btn-hover-bg: var(--p67-brand-strong);
  --bs-btn-hover-border-color: var(--p67-brand-strong);
  --bs-btn-active-bg: var(--p67-brand-strong);
  --bs-btn-active-border-color: var(--p67-brand-strong);
  --bs-btn-color: var(--p67-on-brand);
  --bs-btn-hover-color: var(--p67-on-brand);
  border-radius: var(--p67-radius-sm);
}

html[data-p67-theme] :where(.btn.p67-btn-ghost, .btn.btn-outline-secondary.p67-btn) {
  --bs-btn-color: var(--p67-ink);
  --bs-btn-border-color: var(--p67-border-strong);
  --bs-btn-hover-bg: var(--p67-surface-2);
  --bs-btn-hover-border-color: var(--p67-border-strong);
  --bs-btn-hover-color: var(--p67-ink);
  background: var(--p67-surface-1);
  border-radius: var(--p67-radius-sm);
}

html[data-p67-theme] :where(.table-responsive, .list-group, .table-list) {
  border-color: var(--p67-border) !important;
}

html[data-p67-theme="dark"] :where(.bg-white, .bg-light, .bg-body, .bg-body-tertiary, .alert-light, .text-bg-light) {
  background-color: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f8fafc !important;
}

html[data-p67-theme="dark"] :where(code, kbd, pre, .code-block, .font-monospace) {
  background: rgba(0, 0, 0, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #ede9fe !important;
}

html[data-p67-theme="dark"] :where(.text-secondary, .text-muted, .text-body-secondary, .form-text) {
  color: #b8b4c7 !important;
}

@media (max-width: 575.98px) {
  html[data-p67-theme] :where(.p67-section, .p67-home-section) {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  html[data-p67-theme] :where(.p67-btn, .btn) {
    min-width: 0;
  }
}