.bom { padding-bottom: 2rem; }
.bom .panel { min-width: 0; padding: 1rem; margin-bottom: 1.25rem; }
.bom h3 { margin: 1.2rem 0 .6rem; }
.bom p, .bom li, .bom td, .bom th, .bom dd, .bom summary, .bom .btn { overflow-wrap: anywhere; }
.bom-steps { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.bom-steps a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--border, #d8dee8); border-radius: 999px; text-decoration: none; font-weight: 600; }
.bom-actions { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; margin: .6rem 0; }
.bom .btn { min-height: 44px; max-width: 100%; white-space: normal; }
.bom .btn-icon { min-width: 44px; padding: 0 .6rem; font-size: 1.1rem; }
.bom-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: .6rem 0; }
.bom-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.bom-field > span { font-weight: 600; font-size: .95rem; }
.bom input:not([type=checkbox]):not([type=radio]), .bom select, .bom textarea { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; font-size: 1rem; }
.bom textarea { min-height: 120px; }
.bom-check { flex-direction: row; align-items: center; flex-wrap: wrap; min-height: 44px; cursor: pointer; }
.bom-check input { width: 24px; height: 24px; flex-shrink: 0; }
.bom-check small { flex-basis: 100%; }
.bom .hint, .bom small { color: var(--muted, #52514e); font-size: .9rem; }
.bom-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; border: 0; padding: 0; margin: 1rem 0 0; min-width: 0; }
.bom-modes legend { font-weight: 700; margin-bottom: .5rem; }
.bom-mode { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .5rem; align-items: center; min-height: 44px; padding: .7rem; border: 1px solid var(--border, #d8dee8); border-radius: .7rem; cursor: pointer; }
.bom-mode input { width: 22px; height: 22px; margin: 0; }
.bom-mode span { font-weight: 700; }
.bom-mode small { grid-column: 2; }
.bom-mode:has(input:checked) { border-color: var(--primary, #2563eb); box-shadow: 0 0 0 2px var(--primary, #2563eb) inset; }
.bom-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.25rem; align-items: start; }
.bom-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.bom-card { border: 1px solid var(--border, #d8dee8); border-radius: .7rem; padding: .8rem; margin: .7rem 0; min-width: 0; }
.bom-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; }
.bom-badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; background: #eef2f7; color: #1f2937; font-size: .8rem; font-weight: 600; }
.bom-badge-error { background: #fde8e8; color: #8a1c1c; }
.bom-fieldset, .bom-group { min-width: 0; margin: 1rem 0; padding: .8rem; border: 1px solid var(--border, #d8dee8); border-radius: .7rem; }
.bom-fieldset legend { font-weight: 700; padding: 0 .25rem; }
.bom-group > summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.bom-change { border-top: 1px dashed var(--border, #d8dee8); padding-top: .6rem; margin-top: .6rem; }
.bom-change-type { grid-column: 1 / -1; }
.bom-tree, .bom-tree ul { list-style: none; margin: 0; padding: 0; }
.bom-tree ul { border-left: 2px solid #e2e8f0; margin-left: 21px; padding-left: 4px; }
.bom-node-row { display: flex; align-items: stretch; gap: .25rem; margin: .2rem 0; border-radius: .6rem; }
.bom-node-row.is-selected { background: #eaf2fd; box-shadow: 0 0 0 2px #2a78d6 inset; }
.bom-toggle, .bom-toggle-space { flex: 0 0 44px; min-height: 44px; }
.bom-toggle { border: 0; background: transparent; font-size: 1.1rem; cursor: pointer; border-radius: .5rem; color: inherit; }
.bom-node-main { flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; padding: .35rem .5rem; text-align: left; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; border-radius: .5rem; cursor: pointer; }
.bom-node-name { font-weight: 700; }
.bom-node-meta { color: var(--muted, #52514e); font-size: .88rem; }
.bom-node-cost { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .9rem; }
.bom-node-actions { display: flex; gap: .25rem; align-items: center; flex-wrap: nowrap; }
.bom-node[data-type=material] > .bom-node-row .bom-node-name::before, .bom-node[data-type=consumable] > .bom-node-row .bom-node-name::before { content: "● "; color: #2a78d6; }
.bom-node[data-type=subassembly] > .bom-node-row .bom-node-name::before, .bom-node[data-type=product] > .bom-node-row .bom-node-name::before { content: "■ "; color: #eb6834; }
.bom :focus-visible { outline: 3px solid var(--primary, #2563eb); outline-offset: 2px; }
.bom-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: .5rem 0 1rem; }
.bom-kpi { display: flex; flex-direction: column; gap: .2rem; padding: .8rem; border: 1px solid var(--border, #d8dee8); border-radius: .7rem; min-width: 0; }
.bom-kpi-label { font-size: .85rem; color: var(--muted, #52514e); }
.bom-kpi-value { font-size: 1.25rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bom-result-block { margin: 1.2rem 0; }
.bom-formula { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #f6f7f9; padding: .6rem .8rem; border-radius: .5rem; overflow-wrap: anywhere; }
.bom-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bom-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bom-table th, .bom-table td { overflow-wrap: normal; word-break: normal; hyphens: auto; }
.bom-table td.num { text-align: right; white-space: nowrap; }
.bom-table tfoot td { font-weight: 700; }
.bom-figure { margin: .8rem 0; min-width: 0; }
.bom-figure svg { display: block; width: 100%; height: auto; max-width: 720px; }
.bom-figure g[tabindex]:focus-visible { outline: 2px solid #2a78d6; }
.bom-dialog { width: min(860px, calc(100% - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: auto; padding: 1rem; border: 1px solid var(--border, #d8dee8); border-radius: 1rem; }
.bom-dialog::backdrop { background: #0f172a99; }
.bom-print { display: none; }
@media (hover: hover) {
    .bom-steps a:hover, .bom-toggle:hover, .bom-node-main:hover { background: #f1f5f9; }
}
/* Tables become labeled cards on phones instead of scrolling sideways. */
@media (max-width: 640px) {
    .bom-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .bom-table, .bom-table tbody, .bom-table tfoot, .bom-table tr, .bom-table td { display: block; width: 100%; }
    .bom-table tr { border: 1px solid var(--border, #d8dee8); border-radius: .6rem; margin: .5rem 0; padding: .4rem .6rem; }
    .bom-table td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .25rem 0; text-align: right; white-space: normal; }
    .bom-table td.num { white-space: normal; }
    .bom-table td::before { content: attr(data-label); font-weight: 600; text-align: left; color: var(--muted, #52514e); }
    .bom-table caption { text-align: left; }
}
@media (max-width: 420px) { .bom-fields, .bom-modes { grid-template-columns: minmax(0, 1fr); } .bom-node-actions { flex-wrap: wrap; } }
@media (min-width: 900px) { .bom-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bom-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Desktop: tree on the left, details on the right; results beside the editor on wide screens. */
@media (min-width: 1100px) {
    .bom-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
    .bom-detail { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow: auto; }
    .bom-detail .bom-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1500px) { .bom[data-mode=simple] .bom-workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
@media print {
    @page { size: A4; margin: 14mm 12mm; }
    body:has([data-bom]) .site-header, body:has([data-bom]) .site-footer, body:has([data-bom]) .page-head, body:has([data-bom]) .guide, body:has([data-bom]) .ad-slot, body:has([data-bom]) .support-cta { display: none !important; }
    .bom > :not(.bom-print) { display: none !important; }
    .bom-print { display: block; font-size: 9pt; color: #000; }
    .bom-print h1 { font-size: 14pt; margin: 0 0 6pt; }
    .bom-print h2 { font-size: 11pt; margin: 10pt 0 4pt; break-after: avoid; }
    .bom-print table { width: 100%; border-collapse: collapse; table-layout: fixed; }
    .bom-print thead { display: table-header-group; }
    .bom-print th, .bom-print td { border: .5pt solid #999; padding: 2pt 3pt; text-align: left; vertical-align: top; overflow-wrap: anywhere; word-break: break-word; }
    .bom-print th { background: #eef2f7 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .bom-print tr { break-inside: avoid; }
    .bom-print li { break-inside: avoid; margin: 0 0 2pt; }
}