:root {
    --bom-node-width: 300px;
    --bom-node-radius: 6px;
    --bom-node-body-padding-x: 9px;
    --bom-node-body-padding-top: 4px;
    --bom-node-body-padding-bottom: 9px;
    --bom-node-canvas-bg: #eef2f6;
}
html, body { height: 100%; }
body { min-height: 100%; background: var(--bom-node-canvas-bg); overflow: hidden; }
.opl-admin-header { width: 100%; background: #042c61; color: white; border-bottom: 1px solid #0a3b7a; }
.opl-admin-header-inner { width: 100%; min-height: 52px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.opl-admin-brand, .opl-admin-brand:hover { display: inline-flex; align-items: center; gap: 8px; color: white; text-decoration: none; font-size: 18px; white-space: nowrap; }
.opl-admin-brand img { filter: brightness(0.5); }
.opl-admin-header-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.opl-admin-navigation { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.opl-admin-nav-link, .opl-admin-nav-link:hover { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 8px; border: 0; border-radius: 4px; background: transparent; color: white; text-decoration: none; font-size: 0.92rem; }
.opl-admin-nav-link:hover,
.opl-admin-nav-link.is-active { background: rgba(255, 255, 255, 0.14); }
.opl-admin-navigation .dropdown-menu { margin-top: 0; z-index: 1000; }
.opl-admin-navigation .dropdown:hover .dropdown-menu, .opl-admin-navigation .dropdown:focus-within .dropdown-menu { display: block; }
.opl-admin-header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.opl-admin-header-actions a, .opl-admin-header-actions a:hover { color: white; text-decoration: none; font-size: 0.9rem; }
.opl-public-header-inner {
    padding-left: 10px;
    padding-right: 6px;
    gap: 12px;
}
.opl-public-search {
    flex: 1 1 380px;
    min-width: 120px;
    display: flex;
    justify-content: center;
}
.opl-public-search form {
    width: 100%;
    max-width: 380px;
}
.opl-public-search-input {
    height: 36px;
    background-color: rgb(1, 29, 65);
    border-color: #0a3b7a;
    color: rgb(15, 62, 124) !important;
}
.opl-public-search-input:focus {
    background-color: white !important;
    color: rgb(0, 0, 0) !important;
}
.opl-public-search-input::placeholder {
    color: rgb(23, 76, 145);
    opacity: 1;
}
.opl-public-language-select {
    width: auto;
    height: 32px;
    background-color: #042c61;
    color: white;
    border-color: #0a3b7a;
}
.opl-public-language-select option {
    background-color: #042c61;
    color: white;
}
.bom-node-page,
.bom-node-page input,
.bom-node-page textarea,
.bom-node-page select,
.bom-node-page button {
    -webkit-user-select: none;
    user-select: none;
}
.bom-node-page { height: calc(100vh - 79px); display: flex; flex-direction: column; min-height: 0; }
.bom-node-toolbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: white; border-bottom: 1px solid #d7dde5; }
.bom-node-toolbar-title { min-width: 0; }
.bom-node-toolbar h1 { font-size: 1.25rem; margin: 0; }
.bom-node-toolbar-subtitle { color: #667085; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bom-node-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.bom-node-workspace { flex: 1 1 auto; min-height: 0; display: flex; }
.bom-node-canvas { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; background-color: var(--bom-node-canvas-bg); background-image: radial-gradient(#cbd5df 1px, transparent 1px); background-size: 20px 20px; cursor: grab; touch-action: none; }
.bom-node-canvas.is-panning { cursor: grabbing; }
.bom-node-world { position: absolute; left: 0; top: 0; width: 1600px; min-height: 900px; transform-origin: 0 0; }
.bom-node-links { position: absolute; inset: 0; width: 1600px; height: 900px; overflow: visible; pointer-events: none; }
.bom-node-link { stroke: #6b7f97; stroke-width: 2; fill: none; }
.bom-node-card { position: absolute; width: var(--bom-node-width); background: white; border: 1px solid #cfd7e2; border-radius: var(--bom-node-radius); box-shadow: 0 8px 18px rgba(16, 24, 40, 0.12); font-size: 0.82rem; cursor: default; }
.bom-node-card-root { border-color: #8fb4dc; }
.bom-node-card.is-drop-target { border-color: #0d6efd; box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.22), 0 12px 24px rgba(16, 24, 40, 0.16); }
.bom-node-card.is-drop-target .bom-node-header { background: #eef6ff; }
.bom-node-header { display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 7px 38px 7px 9px; border-bottom: 1px solid #e1e7ef; border-radius: var(--bom-node-radius) var(--bom-node-radius) 0 0; background: #f8fafc; color: #1f2937; position: relative; }
.bom-node-header i { flex: 0 0 auto; color: #042c61; }
.bom-node-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bom-node-body { padding: var(--bom-node-body-padding-top) var(--bom-node-body-padding-x) var(--bom-node-body-padding-bottom); }
.bom-node-body .form-label { margin-bottom: 3px; color: #5f6b7a; font-size: 0.72rem; }
.bom-node-field-row { display: grid; grid-template-columns: minmax(0, 1fr) 62px; gap: 8px; align-items: end; }
.bom-node-readonly-value { min-height: 28px; padding: 4px 0; color: #1f2937; font-size: 0.82rem; overflow-wrap: anywhere; }
.bom-node-readonly-muted { color: #667085; }
.bom-node-price-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 31px; padding: 6px var(--bom-node-body-padding-x); border-top: 1px solid #e1e7ef; color: #5f6b7a; font-size: 0.74rem; }
.bom-node-price-row strong { min-width: 0; color: #1f2937; font-size: 0.82rem; font-weight: 400; text-align: right; overflow-wrap: anywhere; }
#root-estimated-price { font-weight: 700; }
.bom-node-card-readonly,
.bom-node-card-readonly .bom-node-header,
.bom-node-card-readonly .bom-node-body,
.bom-node-card-readonly .bom-node-price-row { background: var(--bom-node-canvas-bg); }
.bom-node-source-switch { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 8px; border-bottom: 1px solid #d7dde5; }
.bom-node-source-tab { min-height: 30px; padding: 4px 6px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #5f6b7a; font-size: 0.76rem; font-weight: 600; }
.bom-node-source-tab:hover { color: #042c61; background: #f8fafc; }
.bom-node-source-tab.is-active { color: #042c61; border-bottom-color: #0d6efd; background: white; }
.bom-node-combobox { position: relative; }
.bom-node-combobox .form-control { padding-right: 58px; }
.bom-node-body .form-control::placeholder { color: #9aa6b2; opacity: 1; }
.bom-node-selection-clear,
.bom-node-dropdown-toggle { position: absolute; top: 0; width: 28px; height: 31px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: #667085; }
.bom-node-selection-clear { right: 28px; }
.bom-node-dropdown-toggle { right: 0; }
.bom-node-selection-clear:hover,
.bom-node-dropdown-toggle:hover { color: #042c61; }
.bom-node-options { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 3px); display: none; max-height: 190px; overflow: auto; background: white; border: 1px solid #cfd7e2; border-radius: 4px; box-shadow: 0 10px 22px rgba(16, 24, 40, 0.16); }
.bom-node-options.is-open { display: block; }
.bom-node-options.is-above { top: auto; bottom: calc(100% + 3px); }
.bom-node-option { width: 100%; display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 5px 8px; border: 0; background: white; color: #1f2937; font-size: 0.78rem; text-align: left; }
.bom-node-option:hover, .bom-node-option:focus { background: #eef6ff; outline: 0; }
.bom-node-option-empty { padding: 7px 8px; color: #7a8794; font-size: 0.78rem; }
.bom-node-delete { position: absolute; top: 4px; right: 5px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-color: transparent; background: transparent; }
.bom-node-add-child { position: absolute; top: 50%; right: -45px; transform: translateY(-50%); width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: transparent !important; box-shadow: none; color: white; }
.bom-node-add-child::before { content: ""; position: absolute; inset: 3px; border-radius: 999px; background: #0d6efd; box-shadow: 0 6px 14px rgba(16, 24, 40, 0.16); }
.bom-node-add-child:hover::before,
.bom-node-add-child:focus::before { background: #0b5ed7; }
.bom-node-add-child i { position: relative; z-index: 1; }
.bom-node-empty { position: absolute; color: #667085; background: rgba(255, 255, 255, 0.9); border: 1px dashed #aab8c7; border-radius: 6px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.bom-node-empty .btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 999px; }
.bom-node-zoom { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 6px; padding: 6px; background: rgba(255, 255, 255, 0.92); border: 1px solid #d7dde5; border-radius: 6px; box-shadow: 0 8px 18px rgba(16, 24, 40, 0.12); }
.bom-node-zoom .btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.bom-node-modal-backdrop { position: fixed; inset: 0; z-index: 1100; display: none; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.46); padding: 16px; }
.bom-node-modal-backdrop.is-open { display: flex; }
.bom-node-modal { width: min(440px, 100%); background: white; border-radius: 6px; border: 1px solid #d7dde5; box-shadow: 0 22px 50px rgba(16, 24, 40, 0.22); }
.bom-node-load-modal { width: min(620px, 100%); }
.bom-node-modal-header, .bom-node-modal-body, .bom-node-modal-footer { padding: 14px 16px; }
.bom-node-modal-header { border-bottom: 1px solid #e6ebf1; font-weight: 600; }
.bom-node-modal-footer { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #e6ebf1; }
.bom-node-load-list { max-height: min(60vh, 520px); overflow: auto; }
.bom-node-load-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 9px 16px; border-bottom: 1px solid #edf1f5; color: #1f2937; text-decoration: none; }
.bom-node-load-item:hover, .bom-node-load-item:focus { background: #eef6ff; color: #1f2937; outline: 0; }
.bom-node-load-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bom-node-load-meta { flex: 0 0 auto; color: #667085; font-size: 0.82rem; }
.bom-node-load-empty { padding: 16px; color: #667085; }
.parts-library-panel { flex: 0 0 360px; width: 360px; min-width: 0; display: flex; flex-direction: column; background: #ffffff; border-left: 1px solid #cfd7e2; }
.parts-library-panel.d-none { display: none !important; }
.parts-library-header { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid #e1e7ef; }
.parts-library-header h2 { margin: 0; font-size: 1rem; }
.parts-library-filters { display: grid; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #e1e7ef; background: #f8fafc; }
.parts-library-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.parts-library-filter-grid select { grid-column: 1 / -1; }
.parts-library-status { min-height: 30px; padding: 7px 12px; color: #667085; font-size: 0.8rem; border-bottom: 1px solid #edf1f5; }
.parts-library-list { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px 12px; background: #f8fafc; }
.parts-library-card { display: grid; gap: 5px; width: 100%; padding: 9px; margin-bottom: 8px; border: 1px solid #d7dde5; border-radius: 6px; background: white; color: #1f2937; cursor: grab; text-align: left; box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06); }
.parts-library-card:active { cursor: grabbing; }
.parts-library-card:hover, .parts-library-card:focus { border-color: #8fb4dc; box-shadow: 0 6px 14px rgba(16, 24, 40, 0.12); outline: 0; }
.parts-library-card-title { display: flex; align-items: center; gap: 7px; font-weight: 600; line-height: 1.25; }
.parts-library-card-meta { color: #667085; font-size: 0.78rem; line-height: 1.25; }
.parts-library-card-price { color: #1f2937; font-size: 0.82rem; }
@media (max-width: 767.98px) {
    body { overflow: auto; }
    .bom-node-page { height: auto; min-height: calc(100vh - 79px); }
    .opl-public-header-inner { gap: 8px; padding-left: 8px; padding-right: 8px; }
    .opl-public-search { display: none; }
    .bom-node-toolbar { align-items: flex-start; flex-direction: column; }
    .bom-node-toolbar-actions { justify-content: flex-start; }
    .bom-node-workspace { flex-direction: column; }
    .bom-node-canvas { min-height: 720px; }
    .parts-library-panel { flex: 0 0 auto; width: 100%; max-height: 70vh; border-left: 0; border-top: 1px solid #cfd7e2; }
}
@media (max-width: 420px) {
    .opl-admin-brand span { display: none; }
}