/* BPure shared interaction layer — SOP teal var(--bpure-teal), reference parity, ui-ux-pro-max */

:root {
  --bpure-int-teal: var(--bpure-teal, var(--bpure-teal));
  --bpure-int-teal-dark: var(--bpure-teal-dark, var(--bpure-teal-hover));
  --bpure-int-text: var(--bpure-text-heading, var(--bpure-text-heading));
  --bpure-int-muted: var(--bpure-text-muted, var(--bpure-text-muted));
  --bpure-int-radius-lg: var(--bpure-radius-lg, 0.75rem);
  --bpure-int-radius-xl: var(--bpure-radius-xl, 1rem);
  --bpure-int-transition: 200ms ease-out;
  --bpure-int-detail-gradient: linear-gradient(to bottom right, #172554, #1e1b4b, #581c87);
}

/* ── Interaction primitives ── */
.bpure-interactive {
  cursor: pointer;
  transition: border-color var(--bpure-int-transition), box-shadow var(--bpure-int-transition),
    transform var(--bpure-int-transition), filter var(--bpure-int-transition), background var(--bpure-int-transition);
}
.bpure-interactive:focus-visible {
  outline: 2px solid var(--bpure-int-teal);
  outline-offset: 2px;
}
.bpure-interactive:active:not(:disabled) {
  transform: scale(0.98);
}
.bpure-interactive:disabled,
.bpure-interactive.disabled {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

.card-hover.bpure-interactive:hover {
  border-color: rgba(0, 124, 120, 0.35);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.page-dashboard .bpure-kpi-card.bpure-interactive:hover {
  transform: none;
  box-shadow: var(--bpure-shadow-lg);
}

/* ── Soft badges ── */
.bpure-badge-soft {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  white-space: nowrap;
}
.bpure-badge-soft.success { background: var(--bpure-success-bg, var(--bpure-success-bg)); color: var(--bpure-success, var(--bpure-success)); }
.bpure-badge-soft.warning { background: var(--bpure-warning-bg, var(--bpure-warning-bg)); color: var(--bpure-warning, var(--bpure-warning)); }
.bpure-badge-soft.danger { background: var(--bpure-danger-bg, var(--bpure-danger-bg)); color: var(--bpure-danger, var(--bpure-danger)); }
.bpure-badge-soft.info { background: var(--bpure-info-bg, var(--bpure-info-bg)); color: var(--bpure-info, var(--bpure-info)); }
.bpure-badge-soft.neutral { background: var(--bpure-neutral-bg, var(--bpure-gray-100)); color: var(--bpure-neutral, var(--bpure-neutral)); }
.bpure-badge-soft.blocked { background: var(--bpure-state-blocked-bg, var(--bpure-danger-bg)); color: var(--bpure-state-blocked, var(--bpure-danger)); }
.bpure-badge-soft.pending { background: var(--bpure-state-pending-bg, var(--bpure-warning-bg)); color: var(--bpure-state-pending, var(--bpure-warning)); }
.bpure-badge-soft.controlled { background: var(--bpure-state-controlled-bg, var(--bpure-primary-soft-bg)); color: var(--bpure-state-controlled, var(--bpure-teal)); }
.bpure-badge-soft.released { background: var(--bpure-state-released-bg, var(--bpure-success-bg)); color: var(--bpure-state-released, var(--bpure-success)); }
.bpure-badge-soft.review { background: var(--bpure-state-review-bg, var(--bpure-info-bg)); color: var(--bpure-state-review, var(--bpure-info)); }

/* ── Tab pills ── */
.bpure-tab-pills {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 2px;
  background: var(--bpure-gray-100);
  border-radius: 0.5rem;
  padding: 4px;
  overflow-x: auto;
}
.bpure-tab-pill {
  border: none;
  background: transparent;
  color: var(--bpure-int-muted);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  white-space: nowrap;
}
.bpure-tab-pill:hover { color: var(--bpure-int-text); }
.bpure-tab-pill.active {
  background: var(--bpure-surface);
  color: var(--bpure-int-teal);
  box-shadow: var(--bpure-shadow-sm);
}

/* Bootstrap nav-tabs styled as bpure pills (dropdown + legacy tab panes) */
.bpure-tab-pills-compat.nav-tabs,
.nav-tabs.bpure-tab-pills-compat {
  border: none;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 2px;
  background: var(--bpure-gray-100);
  border-radius: var(--bpure-radius-md, 0.5rem);
  padding: 4px;
  overflow-x: auto;
}
.bpure-tab-pills-compat .nav-link {
  border: none;
  border-radius: calc(var(--bpure-radius-md, 0.5rem) - 2px);
  background: transparent;
  color: var(--bpure-int-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  white-space: nowrap;
}
.bpure-tab-pills-compat .nav-link:hover { color: var(--bpure-int-teal); }
.bpure-tab-pills-compat .nav-link.active {
  background: var(--bpure-surface);
  color: var(--bpure-int-teal);
  box-shadow: var(--bpure-shadow-sm);
}

/* ── Glass elements ── */
.bpure-btn-glass {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--bpure-surface);
  backdrop-filter: blur(8px);
}
.bpure-btn-glass:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  color: var(--bpure-surface);
}

.bpure-glass-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--bpure-int-radius-lg);
  padding: 1rem 1.25rem;
  text-align: left;
  color: var(--bpure-surface);
  width: 100%;
}
.bpure-glass-card:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ── Modal shells ── */
.bpure-health-modal .modal-header { border-bottom: none; padding-bottom: 0; }
.bpure-health-modal-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem 0.5rem 0 0;
  margin: -1rem -1rem 1rem;
}
.bpure-health-modal-header.overall { background: var(--bpure-info-bg); color: #1e3a8a; }
.bpure-health-modal-header.success { background: var(--bpure-success-bg); color: #14532d; }
.bpure-health-modal-header.warning { background: var(--bpure-warning-bg); color: #713f12; }
.bpure-health-modal-header.danger { background: var(--bpure-danger-bg); color: #7f1d1d; }
.bpure-health-modal-header.onTrack { background: var(--bpure-success-bg); color: #14532d; }
.bpure-health-modal-header.atRisk { background: var(--bpure-warning-bg); color: #713f12; }
.bpure-health-modal-header.offTrack { background: var(--bpure-danger-bg); color: #7f1d1d; }

.bpure-detail-modal .modal-dialog { max-width: 48rem; }
.bpure-detail-modal .modal-content {
  background: var(--bpure-int-detail-gradient);
  color: var(--bpure-surface);
  border: none;
  border-radius: var(--bpure-int-radius-xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.bpure-detail-modal .modal-header { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.bpure-detail-modal .modal-title { font-weight: 600; letter-spacing: -0.02em; }
.bpure-detail-modal .btn-close { filter: invert(1); opacity: 0.85; }
.bpure-detail-modal .modal-body { color: rgba(255, 255, 255, 0.92); }
.bpure-detail-modal .text-muted { color: rgba(255, 255, 255, 0.65) !important; }

.bpure-form-modal .modal-content {
  border-radius: var(--bpure-int-radius-xl);
  border: none;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12);
}

/* ── Kanban cards ── */
.bpure-kanban-card.bpure-interactive:hover {
  border-color: var(--bpure-int-teal);
  box-shadow: 0 4px 12px rgba(0, 124, 120, 0.12);
}

/* ── Toast ── */
.bpure-toast-host {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 360px;
}
.bpure-toast-item {
  background: var(--bpure-surface);
  border: 1px solid var(--bpure-border);
  border-left: 4px solid var(--bpure-int-teal);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  font-size: 0.875rem;
  animation: bpure-toast-in 0.25s ease-out;
}
.bpure-toast-item.error { border-left-color: var(--bpure-danger); }
@keyframes bpure-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Loading ── */
.bpure-loading-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(0, 124, 120, 0.25);
  border-top-color: var(--bpure-int-teal);
  border-radius: 50%;
  animation: bpure-spin 0.6s linear infinite;
}
@keyframes bpure-spin { to { transform: rotate(360deg); } }

/* ── SOP form footer in modals ── */
.bpure-sop-form-footer {
  font-size: 0.75rem;
  color: var(--bpure-int-muted);
  border-top: 1px solid var(--bpure-border);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .bpure-interactive,
  .bpure-toast-item,
  .bpure-loading-spinner {
    animation: none !important;
    transition: none !important;
  }
  .bpure-interactive:active:not(:disabled) { transform: none; }
}

.rc-signature-box {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bpure-gray-50);
  transition: border-color var(--bpure-int-transition);
}
.rc-signature-box:hover { border-color: var(--bpure-int-teal) !important; }
.rc-signature-img { max-height: 48px; max-width: 100%; }

.bpure-risk-accordion .accordion-button { font-size: 0.875rem; font-weight: 600; }
.bpure-ai-wizard-steps { overflow-x: auto; }