:root {
	--pf-bg-primary: #ffffff;
	--pf-bg-surface: #f5f7fa;
	--pf-bg-card: #ffffff;
	--pf-text-primary: #0b0c0e;
	--pf-text-secondary: #4b5563;
	--pf-text-muted: #6b7280;
	--pf-accent: #00d1b8;
	--pf-success: #22c55e;
	--pf-warning: #f59e0b;
	--pf-error: #ef4444;
	--pf-info: #38bdf8;
	--pf-radius-sm: 8px;
	--pf-radius-md: 12px;
	--pf-radius-lg: 16px;
}

.pf-surface {
	background: var(--pf-bg-surface);
	color: var(--pf-text-primary);
}

.pf-card {
	background: var(--pf-bg-card);
	color: var(--pf-text-primary);
	border-radius: var(--pf-radius-md);
	box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
	border: 1px solid rgba(0,0,0,0.06);
}

.pf-button {
	background: var(--pf-accent);
	color: #000;
	border: none;
	border-radius: 999px;
	padding: 10px 16px;
	font-weight: 600;
	transition: transform .05s ease, box-shadow .2s ease;
}
.pf-button:hover { box-shadow: 0 6px 16px rgba(0,209,184,.35); }
.pf-button:active { transform: translateY(1px); }

.bom-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--pf-bg-card);
	color: var(--pf-text-primary);
	border-radius: var(--pf-radius-md);
	overflow: hidden;
}
.bom-table th, .bom-table td {
	padding: 12px 14px;
	border-bottom: 1px solid rgba(0,0,0,0.06);
}
.bom-table th {
	text-align: left;
	font-weight: 600;
	color: var(--pf-text-secondary);
	background: var(--pf-bg-surface);
}

.bom-tree { list-style: none; margin: 0; padding: 0; }
.bom-tree__item { display: flex; align-items: center; gap: 8px; padding: 8px 6px; }
.bom-tree__children { margin-left: 18px; border-left: 1px dashed rgba(0,0,0,0.1); padding-left: 12px; }
.bom-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--pf-bg-surface); color: var(--pf-text-secondary); }

/* Selection state for multi-select */
.bom-tree__item--selected { background: rgba(0,209,184,.10); border-radius: var(--pf-radius-sm); }

.pf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--pf-bg-surface); color: var(--pf-text-secondary); }
.pf-chip--accent { background: rgba(0,209,184,.12); color: #04695f; }

/* Status chips */
.pf-chip[data-status="approved"] { background: rgba(34,197,94,.12); color: #065f46; }
.pf-chip[data-status="pending_approval"] { background: rgba(245,158,11,.12); color: #92400e; }
.pf-chip[data-status="draft"] { background: rgba(56,189,248,.12); color: #0c4a6e; }
.pf-chip[data-status="superseded"] { background: rgba(107,114,128,.12); color: #374151; }

/* Lifecycle chips (Parts) */
.pf-chip[data-status="prototype"] { background: rgba(56,189,248,.12); color: #0c4a6e; }
.pf-chip[data-status="released"] { background: rgba(34,197,94,.12); color: #065f46; }
.pf-chip[data-status="on_hold"] { background: rgba(245,158,11,.12); color: #92400e; }
.pf-chip[data-status="obsolete"] { background: rgba(107,114,128,.12); color: #374151; }

/* Import flow chips */
.pf-chip[data-state="idle"] { background: rgba(0,0,0,0.06); color: #374151; }
.pf-chip[data-state="validating"] { background: rgba(56,189,248,.15); color: #0c4a6e; }
.pf-chip[data-state="ready"] { background: rgba(34,197,94,.15); color: #065f46; }
.pf-chip[data-state="error"] { background: rgba(239,68,68,.15); color: #991b1b; }

/* BOM search highlight */
.bom-highlight { background: rgba(56,189,248,.25); border-radius: 4px; }

/* Tabs (MDC-like) */
.pf-tabs { display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.pf-tab { padding: 6px 10px; border-radius: var(--pf-radius-sm); background: transparent; color: var(--pf-text-secondary); }
.pf-tab[aria-selected="true"] { background: rgba(0,209,184,.12); color: #04695f; }
/* Compact icon buttons used in BOMs table */
.pf-btn--icon { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.pf-btn--xs { padding: 4px 6px; font-size: 12px; }

/* Modal header actions */
.pf-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,0.06); position: sticky; top: 0; background: var(--pf-bg-card); z-index: 10; }
.pf-actions { display: inline-flex; align-items: center; gap: 8px; }
.pf-icon-btn { border: 1px solid rgba(0,0,0,0.08); background: #fff; padding: 6px 8px; border-radius: var(--pf-radius-sm); }
.pf-icon-btn:hover { background: var(--pf-bg-surface); }

/* Compliance badges */
.bg-green-100 { background-color: rgba(34,197,94,0.12); }
.text-green-800 { color: #065f46; }
.bg-blue-100 { background-color: rgba(56,189,248,0.12); }
.text-blue-800 { color: #0c4a6e; }
.bg-purple-100 { background-color: rgba(147,51,234,0.12); }
.text-purple-800 { color: #581c87; }
.bg-orange-100 { background-color: rgba(245,158,11,0.12); }
.text-orange-800 { color: #92400e; }
.bg-red-100 { background-color: rgba(239,68,68,0.12); }
.text-red-800 { color: #991b1b; }
.bg-gray-100 { background-color: rgba(107,114,128,0.12); }
.text-gray-800 { color: #374151; }
.bg-teal-100 { background-color: rgba(0,209,184,0.12); }
.text-teal-800 { color: #04695f; }
.bg-amber-100 { background-color: rgba(245,158,11,0.12); }
.text-amber-800 { color: #92400e; }

/* Alternates Management */
.alternate-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-bg-card);
}

.alternate-item:hover {
  background: var(--pf-bg-surface);
}

.alternate-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.alternate-status--approved {
  background: rgba(34,197,94,0.12);
  color: #065f46;
}

.alternate-status--conditional {
  background: rgba(245,158,11,0.12);
  color: #92400e;
}

.alternate-status--pending {
  background: rgba(107,114,128,0.12);
  color: #374151;
}

.alternate-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

.alternate-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0,209,184,0.12);
  color: #04695f;
  font-size: 10px;
  font-weight: 600;
}

.alternate-indicator::after {
  content: attr(data-count);
}

/* Tree view alternates indicator */
.bom-tree__item .alternate-indicator {
  margin-left: 4px;
}

/* Costing Components */
.cost-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(34,197,94,0.12);
  color: #065f46;
}

.cost-indicator--high {
  background: rgba(239,68,68,0.12);
  color: #991b1b;
}

.cost-indicator--medium {
  background: rgba(245,158,11,0.12);
  color: #92400e;
}

.cost-indicator--low {
  background: rgba(34,197,94,0.12);
  color: #065f46;
}

.cost-breakdown {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-bg-card);
}

.cost-breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.cost-breakdown-item:last-child {
  border-bottom: none;
}

.cost-breakdown-total {
  background: var(--pf-bg-surface);
  font-weight: 600;
}

.price-break-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-bg-card);
}

.price-break-item input {
  flex: 1;
  min-width: 0;
}

.price-break-remove {
  background: rgba(239,68,68,0.12);
  color: #991b1b;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
}

.price-break-remove:hover {
  background: rgba(239,68,68,0.2);
}

.cost-rollup-modal {
  max-width: 900px;
  max-height: 85vh;
}

.cost-sensitivity-chart {
  height: 200px;
  background: var(--pf-bg-surface);
  border-radius: var(--pf-radius-sm);
  position: relative;
}

.sensitivity-bar {
  position: absolute;
  background: var(--pf-accent);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.sensitivity-label {
  position: absolute;
  font-size: 11px;
  color: var(--pf-text-secondary);
  white-space: nowrap;
}

/* Cost export styles */
.cost-export-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.cost-export-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-bg-card);
  cursor: pointer;
  transition: all 0.2s ease;
}

.cost-export-option:hover {
  background: var(--pf-bg-surface);
  border-color: var(--pf-accent);
}

.cost-export-option input[type="checkbox"] {
  margin: 0;
}

/* Effectivity Management Styles */
.effectivity-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid;
}

.effectivity-indicator--active {
  background: rgba(34,197,94,0.12);
  color: #065f46;
  border-color: rgba(34,197,94,0.3);
}

.effectivity-indicator--future {
  background: rgba(56,189,248,0.12);
  color: #0c4a6e;
  border-color: rgba(56,189,248,0.3);
}

.effectivity-indicator--expired {
  background: rgba(107,114,128,0.12);
  color: #374151;
  border-color: rgba(107,114,128,0.3);
}

.effectivity-indicator--warning {
  background: rgba(245,158,11,0.12);
  color: #92400e;
  border-color: rgba(245,158,11,0.3);
}

.effectivity-indicator--none {
  background: rgba(0,0,0,0.05);
  color: #6b7280;
  border-color: rgba(0,0,0,0.1);
}

/* BOM tree item effectivity styling */
.bom-tree__item--effectivity-expired {
  opacity: 0.6;
  background: rgba(107,114,128,0.05);
}

.bom-tree__item--effectivity-future {
  background: rgba(56,189,248,0.05);
  border-left: 2px solid rgba(56,189,248,0.4);
}

.bom-tree__item--effectivity-warning {
  background: rgba(245,158,11,0.05);
  border-left: 2px solid rgba(245,158,11,0.4);
}

/* Effectivity modal styling */
.effectivity-type-section {
  transition: all 0.3s ease;
}

.effectivity-type-section.hidden {
  display: none;
}

.effectivity-date-preview {
  padding: 8px 12px;
  background: var(--pf-bg-surface);
  border-radius: var(--pf-radius-sm);
  border: 1px solid rgba(0,0,0,0.06);
  font-family: monospace;
  font-size: 12px;
  color: var(--pf-text-secondary);
}

.effectivity-validation-error {
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.3);
  color: #991b1b;
}

.effectivity-validation-warning {
  background: rgba(245,158,11,0.1);
  border-color: rgba(245,158,11,0.3);
  color: #92400e;
}

.effectivity-conflict-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(239,68,68,0.05);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: var(--pf-radius-sm);
  margin-bottom: 4px;
}

.effectivity-conflict-details {
  font-size: 11px;
  color: #991b1b;
}

/* Filter panel effectivity styling */
.bom-effectivity-filter-active {
  background: rgba(0,209,184,0.1);
  border-color: var(--pf-accent);
}

.effectivity-filter-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(0,209,184,0.12);
  color: #04695f;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.effectivity-status-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.effectivity-status-badge--active {
  background: rgba(34,197,94,0.15);
  color: #065f46;
}

.effectivity-status-badge--future {
  background: rgba(56,189,248,0.15);
  color: #0c4a6e;
}

.effectivity-status-badge--expired {
  background: rgba(107,114,128,0.15);
  color: #374151;
}

.effectivity-status-badge--none {
  background: rgba(0,0,0,0.08);
  color: #6b7280;
}

/* Effectivity timeline visualization */
.effectivity-timeline {
  position: relative;
  height: 20px;
  background: rgba(0,0,0,0.05);
  border-radius: 10px;
  overflow: hidden;
}

.effectivity-timeline-range {
  position: absolute;
  height: 100%;
  background: var(--pf-accent);
  border-radius: 10px;
}

.effectivity-timeline-marker {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 24px;
  background: #ef4444;
  border-radius: 1px;
}

.effectivity-tooltip {
  position: absolute;
  background: rgba(0,0,0,0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
}