/*
  Shared PipelineWerks card surface.
  Loaded after page styles so cards across pages feel like one product.
*/

:root {
  --pw-card-bg: rgba(7, 16, 29, 0.9);
  --pw-card-bg-strong: rgba(3, 8, 16, 0.74);
  --pw-card-border: rgba(166, 184, 216, 0.18);
  --pw-card-border-hover: rgba(185, 140, 255, 0.32);
  --pw-card-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
  --pw-card-shadow-hover: 0 16px 34px rgba(0, 0, 0, 0.24);
  --pw-card-radius: 10px;
  --pw-card-radius-lg: 14px;
}

.nav-item {
  position: relative !important;
  color: #cbd5f5 !important;
}

.nav-item span {
  color: #9fb2d8 !important;
}

.nav-list .nav-item:hover,
.nav-list .nav-item:focus-visible,
.nav-list .nav-item.active {
  color: #b98cff !important;
  border: 1px solid rgba(139, 92, 246, 0.38) !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(139, 92, 246, 0.12)) !important;
  box-shadow:
    inset 3px 0 0 #9b5cff,
    0 0 18px rgba(139, 92, 246, 0.16) !important;
  transform: translateX(1px) !important;
}

.nav-list .nav-item:hover span,
.nav-list .nav-item:focus-visible span,
.nav-list .nav-item.active span {
  color: #d8c9ff !important;
}

.nav-list .nav-item.active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 6px !important;
  bottom: 6px !important;
  width: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #c07bff, #7d36ff) !important;
  box-shadow: 0 0 12px rgba(141, 82, 255, 0.58) !important;
}

.pipeline-create-page .nav-item[href="/connectors"],
.pipeline-detail-page .nav-item[href="/connectors"] {
  color: #cbd5f5 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.pipeline-create-page .nav-item[href="/connectors"] span,
.pipeline-detail-page .nav-item[href="/connectors"] span {
  color: #9fb2d8 !important;
}

.panel,
.modal,
.welcome-card,
.stat-card,
.metric-card,
.sidebar-app-card,
.dashboard-hero-copy,
.dashboard-filter-card,
.dashboard-quick-card,
.dashboard-link-card,
.dashboard-metric,
.dashboard-chart-card,
.connector-card,
.connector-summary-card,
.connector-detail-hero,
.connector-detail-single-card,
.connector-create-panel,
.connector-create-summary,
.connector-create-page .user-edit-form-card,
.pipeline-card,
.pipeline-detail-hero,
.pipeline-detail-single-card,
.pipeline-create-page .user-edit-form-card,
.pipeline-create-page .connector-create-summary,
.role-summary-card,
.role-hint-card,
.user-card,
.user-detail-hero,
.user-detail-card,
.user-edit-summary,
.user-edit-form-card,
.incident-analysis-card,
.incident-step-card,
.incident-card,
.incident-event-card,
.analysis-card,
.analysis-step-card,
.analysis-code-card,
.incident-detail-page .incident-code-block {
  background: var(--pw-card-bg) !important;
  border: 1px solid var(--pw-card-border) !important;
  border-radius: var(--pw-card-radius-lg) !important;
  box-shadow: var(--pw-card-shadow) !important;
}

.welcome-card:hover,
.stat-card:hover,
.metric-card:hover,
.dashboard-quick-card:hover,
.dashboard-link-card:hover,
.dashboard-metric:hover,
.dashboard-chart-card:hover,
.connector-card:hover,
.connector-summary-card:hover,
.connector-detail-hero:hover,
.connector-detail-single-card:hover,
.pipeline-card:hover,
.pipeline-detail-hero:hover,
.pipeline-detail-single-card:hover,
.role-summary-card:hover,
.user-card:hover,
.user-detail-hero:hover,
.user-detail-card:hover,
.incident-analysis-card:hover,
.incident-step-card:hover,
.incident-card:hover,
.incident-event-card:hover,
.analysis-card:hover,
.analysis-step-card:hover {
  transform: none !important;
  background: var(--pw-card-bg) !important;
  border-color: var(--pw-card-border-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    var(--pw-card-shadow-hover) !important;
}

.dashboard-quick-card:focus-visible,
.dashboard-link-card:focus-visible,
.connector-card:focus-visible,
.pipeline-card:focus-visible,
.user-card:focus-visible,
.incident-card:focus-visible {
  outline: none !important;
  border-color: rgba(160, 101, 255, 0.72) !important;
  box-shadow:
    0 0 0 3px rgba(139, 92, 246, 0.22),
    var(--pw-card-shadow-hover) !important;
}

.user-detail-card-head,
.pipeline-create-form > .user-detail-card-head,
.connector-create-page .user-detail-card-head,
.connector-detail-single-card .user-detail-card-head,
.pipeline-detail-single-card .user-detail-card-head {
  background: var(--pw-card-bg-strong) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.user-detail-fields,
.connector-detail-single-card .user-detail-fields,
.pipeline-detail-single-card .user-detail-fields,
.incident-info-list,
.incident-components,
.incident-action-list,
.incident-detail-page .incident-code-block {
  background: var(--pw-card-bg-strong) !important;
  border-color: rgba(166, 184, 216, 0.12) !important;
  box-shadow: none !important;
}

.user-detail-field,
.connector-detail-single-card .user-detail-field,
.pipeline-detail-single-card .user-detail-field,
.incident-info-list li,
.incident-component-row,
.incident-action-list button {
  background: transparent !important;
}

.modal-backdrop .modal,
.modal-backdrop .modal:hover {
  background: rgba(10, 18, 32, 0.96) !important;
  border-color: rgba(166, 184, 216, 0.24) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.48),
    0 0 42px rgba(139, 92, 246, 0.16) !important;
}

.metric-card::before,
.connector-card::before,
.dashboard-quick-card::before,
.dashboard-link-card::before,
.dashboard-filter-card::before,
.dashboard-chart-card::before,
.connector-summary-card::before,
.role-summary-card::before,
.user-card::before,
.user-self-card::before,
.incident-card::before,
.incident-analysis-card::before,
.incident-step-card::before,
.analysis-card::before,
.analysis-step-card::before {
  display: none !important;
}

/* Add Pipeline: no combined wrapper card; children keep their own card borders. */
.pipeline-create-page .connector-create-panel,
.connector-create-page:not(.pipeline-create-page) .connector-create-panel {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}