/* ── BOM ESTIMATOR TAB (scoped — reuses app's real theme vars) ─────────── */
#page-bom{
  --accent:var(--blue);--accent-light:var(--blue-bg);--accent-mid:var(--blue-soft);
  --warn:var(--amber-soft);--warn-light:var(--amber-bg);
  --info:var(--blue-soft);--info-light:var(--blue-bg);
  --ych:var(--amber-soft);--ych-light:var(--amber-bg);
  --bsg:var(--blue-soft);--bsg-light:var(--blue-bg);
  --radius:8px;--radius-lg:12px;
}
.bom-page{display:none}.bom-page.active{display:block}
#page-bom .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:1.25rem;box-shadow:var(--shadow)}
#page-bom .beer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:20px}
#page-bom .beer-btn{border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;cursor:pointer;background:var(--surface2);text-align:left;transition:all .15s;color:var(--text);font-family:var(--font)}
#page-bom .beer-btn:hover{border-color:var(--border2)}
#page-bom .beer-btn.on{border:2px solid var(--accent);background:var(--accent-light)}
#page-bom .beer-btn.on .bb-code{color:var(--accent-mid)}
#page-bom .beer-btn.disabled{opacity:.38;cursor:not-allowed}
#page-bom .bb-code{font-size:11px;font-weight:700;color:var(--text3);margin-bottom:2px;font-family:var(--mono)}
#page-bom .bb-name{font-size:12px;font-weight:500;color:var(--text)}
#page-bom .bb-size{font-size:11px;color:var(--text3);margin-top:2px}
#page-bom .spec-divider{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);margin:8px 0 4px;padding-top:8px;border-top:1px solid var(--border)}
#page-bom .batch-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
#page-bom .batch-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#page-bom .batch-row label{font-size:13px;color:var(--text2);min-width:170px}
#page-bom .batch-row input[type=number]{width:60px;padding:5px 8px;border:1px solid var(--border2);border-radius:6px;font-size:13px;background:var(--surface2);color:var(--text);font-family:var(--font)}
#page-bom .batch-row input[type=number]:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)}
#page-bom .batch-note{font-size:12px;color:var(--text3)}
#page-bom .results-table{width:100%;border-collapse:collapse;font-size:13px}
#page-bom .results-table th{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);padding:8px 12px;text-align:left;background:var(--surface2);border-bottom:1px solid var(--border)}
#page-bom .results-table th.r{text-align:right}
#page-bom .results-table td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text)}
#page-bom .results-table td.r{text-align:right;color:var(--text2)}
#page-bom .results-table tr:last-child td{border-bottom:none}
#page-bom .results-table tr:hover td{background:var(--surface2)}
#page-bom .cat-row td{background:var(--surface2);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);padding:6px 12px}
#page-bom .item-name{font-weight:500;color:var(--text)}
#page-bom .item-vendor{font-size:11px;color:var(--text3)}
#page-bom .bom-badge{display:inline-block;font-size:11px;padding:3px 9px;border-radius:6px;font-weight:600;white-space:nowrap;border:1px solid}
#page-bom .bom-badge-est{font-size:9.5px;padding:1px 6px;border-radius:5px;background:var(--amber-bg);color:var(--amber-soft);border:1px solid var(--amber-border);margin-left:6px;vertical-align:middle;font-weight:700}
#page-bom .fc-week-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
#page-bom .fc-week{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
#page-bom .fc-week-head{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:var(--surface2);cursor:pointer;user-select:none;gap:12px}
#page-bom .fc-week-head:hover{background:var(--surface3)}
#page-bom .fc-week-label{font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;font-family:var(--mono)}
#page-bom .fc-week-summary{font-size:12px;color:var(--text3);text-align:right}
#page-bom .fc-week-body{padding:12px 14px;display:none;border-top:1px solid var(--border)}
#page-bom .fc-week-body.open{display:block}
#page-bom .fc-brew-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
#page-bom .fc-brew-row:last-child{margin-bottom:0}
#page-bom .fc-brew-label{font-size:13px;color:var(--text2);min-width:160px;cursor:pointer}
#page-bom .fc-brew-row input[type=number]{width:60px;padding:5px 8px;border:1px solid var(--border2);border-radius:6px;font-size:13px;background:var(--surface2);color:var(--text);font-family:var(--font)}
#page-bom .fc-brew-row input[type=number]:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)}
#page-bom .fc-brew-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue);cursor:pointer}
#page-bom .fc-brew-note{font-size:11px;color:var(--text3)}
#page-bom .fc-controls{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
#page-bom .fc-range-label{font-size:13px;color:var(--text2)}
#page-bom select{padding:6px 10px;border:1px solid var(--border2);border-radius:6px;font-size:13px;background:var(--surface2);color:var(--text);font-family:var(--font)}
#page-bom select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)}
#page-bom .fc-totals-note{font-size:12px;color:var(--text3)}
#page-bom .fc-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
#page-bom .hop-matrix-wrap{overflow-x:auto}
#page-bom .hop-matrix{border-collapse:collapse;font-size:12px;min-width:100%}
#page-bom .hop-matrix th{padding:8px 10px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);background:var(--surface2);border:1px solid var(--border);text-align:center;white-space:nowrap}
#page-bom .hop-matrix th.hop-name-col{text-align:left;min-width:160px}
#page-bom .hop-matrix td{padding:8px 10px;border:1px solid var(--border);text-align:center;vertical-align:middle;background:var(--surface);color:var(--text)}
#page-bom .hop-matrix td.hop-name-col{text-align:left;font-weight:500;color:var(--text);background:var(--surface2)}
#page-bom .hop-matrix td.hop-vendor-col{text-align:left;background:var(--surface2)}
#page-bom .hop-cell-hit{background:var(--blue-bg);color:var(--blue-soft);font-size:11px;font-weight:700}
#page-bom .hop-cell-empty{color:var(--text3);font-size:11px}
#page-bom .vendor-row td{background:var(--surface2)}
#page-bom .help-section{margin-bottom:28px}
#page-bom .help-section h3{font-size:14px;font-weight:700;color:var(--text);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
#page-bom .help-section p{font-size:13px;color:var(--text2);margin-bottom:8px;line-height:1.6}
#page-bom .help-section ul{padding-left:18px;font-size:13px;color:var(--text2);line-height:1.8}
#page-bom .help-section li{margin-bottom:4px}
#page-bom .help-tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:99px;font-weight:600;vertical-align:middle;margin:0 2px}
#page-bom .help-tag.est{background:var(--amber-bg);color:var(--amber-soft)}
#page-bom .help-tag.ych{background:var(--amber-bg);color:var(--amber-soft)}
#page-bom .help-tag.bsg{background:var(--blue-bg);color:var(--blue-soft)}
#page-bom .help-tip{background:var(--blue-bg);border-left:3px solid var(--blue);border-radius:0 var(--radius) var(--radius) 0;padding:10px 14px;font-size:13px;color:var(--text2);margin-bottom:8px}