/* Products and formulas: the same quiet workshop layout as the accepted sections. */
.board-shell--formulations .formulations-intro { margin: 24px 0; }
.board-shell--formulations .formulations-intro h2 { margin: 5px 0 9px; font-size: 30px; line-height: 1.6; color: #223e32; }
.board-shell--formulations .formulations-intro p { margin: 0; color: #536b60; font-size: 14px; line-height: 1.9; }
.board-shell--formulations .formulations-intro .section-kicker { color: #648474; font-size: 12px; }
.board-shell--formulations .formulations-workspace { min-width: 0; border: 1px solid #e1e8e1; border-radius: 15px; background: #fff; box-shadow: 0 3px 16px #26493205; overflow: hidden; }
.board-shell--formulations .formulation-tabs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 2px; margin: 0; padding-inline: 22px; border-bottom: 1px solid #e1e8e1; }
.board-shell--formulations .formulation-tabs button { min-width: 0; min-height: 64px; padding: 14px 6px 11px; margin: 0; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: #fff; color: #677b6c; font-size: 13px; font-weight: 600; line-height: 1.8; box-shadow: none; }
.board-shell--formulations .formulation-tabs button[aria-selected="true"] { color: #286747; border-bottom-color: #3b8663; background: #f8fbf7; }
.board-shell--formulations .formulation-tabs button:hover { color: #265d42; background: #f6faf5; }
.board-shell--formulations .formulations-content { padding: 28px; min-width: 0; }
.board-shell--formulations .formulation-warning { margin: 0 0 20px; padding: 11px 14px; border: 1px solid #e6e9d7; border-radius: 9px; color: #6d7051; background: #fafbef; font-size: 12px; line-height: 1.9; }
.board-shell--formulations .formulation-panel { margin: 0; padding: 0; border: 0; background: transparent; min-width: 0; }
.board-shell--formulations .panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin: 0 0 22px; }
.board-shell--formulations .panel-heading h3 { margin: 0 0 6px; font-size: 19px; color: #2d503a; }
.board-shell--formulations .panel-heading p { max-width: 680px; margin: 0; color: #5e7465; font-size: 14px; line-height: 1.9; }
.board-shell--formulations .panel-actions { display: flex; flex-wrap: wrap; flex-shrink: 0; gap: 10px; }
.board-shell--formulations .panel-actions:empty { display: none; }
.board-shell--formulations .panel-actions button { min-height: 46px; padding: 10px 16px; margin: 0; border: 1px solid #2d704e; border-radius: 10px; color: #fff; background: #2d704e; font-size: 14px; }
.board-shell--formulations .formulation-toolbar { display: block; margin: 0 0 24px; }
.board-shell--formulations .formulation-toolbar[hidden] { display: none; }
.board-shell--formulations .formulation-toolbar label { display: grid; gap: 7px; min-width: 0; color: #4f6b58; font-size: 13px; }
.board-shell--formulations .formulation-toolbar input { width: 100%; max-width: 100%; min-width: 0; min-height: 46px; margin: 0; padding: 10px 14px; border: 1px solid #cbd9ce; border-radius: 9px; color: #2b4b38; background: #fafcf8; font-size: 14px; }
.board-shell--formulations .record-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 0 24px; min-width: 0; }
.board-shell--formulations .record-card { display: block; min-width: 0; padding: 22px; border: 1px solid #dfe7db; border-radius: 12px; background: #fff; overflow-wrap: anywhere; }
.board-shell--formulations .record-card h4 { margin: 0 0 7px; font-size: 17px; color: #315639; line-height: 1.8; }
.board-shell--formulations .record-card p { margin: 7px 0; font-size: 14px; line-height: 1.9; color: #5c735f; }
.board-shell--formulations .record-card .record-code { color: #75836d; font-size: 12px; }
.board-shell--formulations .record-card.is-linked-record { border-color: #4e9763; box-shadow: 0 0 0 2px #4e976317; }
.board-shell--formulations .record-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.board-shell--formulations :is(.record-actions,.record-card) > button { min-height: 36px; padding: 6px 11px; margin: 0; border: 1px solid #d8e4d2; border-radius: 8px; color: #477347; background: #fff; font-size: 12px; line-height: 1.7; }
.board-shell--formulations .record-actions button:is([data-action^="archive"],[data-action="open-delete-product-dialog"]) { color: #7c695c; border-color: transparent; background: transparent; }
.board-shell--formulations .record-actions button:hover { background: #f3f7ef; }
.board-shell--formulations .formulations-record-details { margin: 18px 0 0; border-top: 1px solid #e4ebdf; padding-top: 14px; }
.board-shell--formulations .formulations-record-details > summary { cursor: pointer; color: #47743d; font-size: 13px; line-height: 1.9; }
.board-shell--formulations .formulations-details-body { padding-top: 10px; }
.board-shell--formulations :is(.formulations-history,.product-relationships) h5 { margin: 12px 0; color: #46663c; font-size: 14px; }
.board-shell--formulations .product-relationships > p { font-size: 13px; margin-bottom: 14px; }
.board-shell--formulations .product-relations-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 12px; }
.board-shell--formulations .product-relation-group { min-width: 0; padding: 14px 16px; margin: 0; border: 1px solid #e0e9d8; border-radius: 10px; background: #f9fcf5; }
.board-shell--formulations .product-relation-group > summary { cursor: pointer; color: #476d3b; font-size: 13px; font-weight: 650; }
.board-shell--formulations .product-relation-group ul { margin: 10px 0 0; padding-inline-start: 16px; }
.board-shell--formulations .product-relation-group li { margin: 7px 0; color: #5f7755; font-size: 12px; line-height: 2; }
.board-shell--formulations a { color: #326d42; text-underline-offset: 3px; overflow-wrap: anywhere; }
.board-shell--formulations .formulations-history { margin-top: 18px; padding: 14px 16px; border: 1px solid #e5eadd; border-radius: 10px; background: #fcfdf9; }
.board-shell--formulations .formulations-history h5 { margin-top: 0; }
.board-shell--formulations .formulations-history p { font-size: 12px; }
.board-shell--formulations .formulations-history ul { margin: 12px 0 0; padding-inline-start: 18px; }
.board-shell--formulations .formulations-history li { margin: 8px 0; font-size: 12px; line-height: 2; color: #607158; }
.board-shell--formulations .formulations-empty { grid-column: 1 / -1; padding: 32px 20px; border: 1px dashed #dce5d7; border-radius: 12px; background: #fafcf8; color: #5b7261; text-align: center; font-size: 14px; line-height: 1.9; }
.board-shell--formulations .formulations-empty p { margin: 7px 0 0; font-size: 13px; }
.board-shell--formulations .formulation-panel > h4 { margin: 24px 0 14px; color: #42603a; font-size: 16px; }
.board-shell--formulations .formulations-hint { margin: -4px 0 16px; color: #647859; font-size: 13px; line-height: 1.9; }
.board-shell--formulations .formula-preview { margin: 14px 0; padding: 14px 16px; border: 1px solid #dfe7d7; border-radius: 9px; background: #f9fbf5; }
.board-shell--formulations .formula-preview > summary { cursor: pointer; color: #476d3d; font-size: 13px; line-height: 1.9; }
.board-shell--formulations .formula-preview h5 { margin: 18px 0 10px; font-size: 13px; color: #4b6a40; }
.board-shell--formulations .formula-content-list { margin: 0; padding-inline-start: 24px; }
.board-shell--formulations .formula-content-list li { padding: 7px 0; line-height: 1.9; color: #4c6842; font-size: 13px; }
.board-shell--formulations .formula-content-list li strong { margin-inline-start: 18px; white-space: nowrap; font-weight: 500; }
.board-shell--formulations .inline-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)) auto; gap: 16px; align-items: end; margin: 0 0 22px; padding: 18px; border: 1px solid #e2e9dc; border-radius: 11px; background: #f8fbf4; }
.board-shell--formulations .inline-form label { display: grid; gap: 8px; min-width: 0; color: #4f6b45; font-size: 13px; }
.board-shell--formulations .inline-form select { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid #cbd9c5; border-radius: 9px; color: #2b4b31; background: #fff; font-size: 14px; }
.board-shell--formulations .inline-form button { margin: 0; min-height: 46px; padding: 10px 18px; border-radius: 9px; border: 1px solid #2d704e; color: #fff; background: #2d704e; font-size: 14px; }
.board-shell--formulations .comparison-result { font-size: 14px; line-height: 1.9; overflow-wrap: anywhere; }
.board-shell--formulations .formulations-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; border: 1px solid #e0e8d8; border-radius: 10px; }
.board-shell--formulations .formulations-table-scroll table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 13px; }
.board-shell--formulations .formulations-table-scroll :is(th,td) { padding: 12px 14px; text-align: start; border-bottom: 1px solid #e6edde; line-height: 1.9; }
.board-shell--formulations .formulations-table-scroll th { color: #567149; background: #f5f9ef; }
.board-shell--formulations .formulations-dialog { width: min(720px,calc(100vw - 28px)) !important; max-width: calc(100vw - 28px); max-height: calc(100dvh - 32px) !important; padding: 0; overflow: auto; background: #fff; border: 1px solid #dce5d8; border-radius: 16px; box-shadow: 0 24px 70px #193d2a30; }
.board-shell--formulations dialog::backdrop { background: #17372e80; backdrop-filter: blur(3px); }
.board-shell--formulations .formulations-dialog form { display: grid; gap: 0; padding: 0; min-width: 0; }
.board-shell--formulations .formulations-dialog h3 { margin: 0; color: #2b4c36; font-size: 21px; line-height: 1.7; }
.board-shell--formulations .formulations-dialog :is(.form-intro,.form-code-note,p) { margin: 0; color: #66795d; font-size: 13px; line-height: 1.9; }
.board-shell--formulations .formulations-dialog label { display: grid; align-content: start; gap: 7px; min-width: 0; color: #48664e; font-size: 14px; line-height: 1.8; }
.board-shell--formulations .formulations-dialog :is(input,select,textarea) { width: 100%; min-width: 0; min-height: 46px; padding: 9px 12px; border: 1px solid #cbd9c7; border-radius: 9px; color: #294931; background: #fcfdfb; font-size: 14px; line-height: 1.7; }
.board-shell--formulations .formulations-dialog textarea { resize: vertical; min-height: 82px; }
.board-shell--formulations .formulations-dialog :is(input,textarea)::placeholder { color: #7e8e77; }
.board-shell--formulations .formulations-dialog :is(label small,.field-note) { color: #667d63; font-size: 12px; line-height: 1.9; }
.board-shell--formulations .formulations-dialog button { justify-self: start; min-height: 38px; margin: 0; padding: 7px 12px; border: 1px solid #d3dfcd; border-radius: 8px; background: #fff; color: #4a7242; font-size: 13px; }
.board-shell--formulations .formulations-dialog .dialog-actions { display: grid; grid-template-columns: repeat(2,minmax(0,150px)); justify-content: end; gap: 10px; margin: 0; padding: 18px 26px; border-top: 1px solid #e3eadd; background: #fff; position: sticky; bottom: 0; z-index: 1; }
.board-shell--formulations .formulations-dialog .dialog-actions > button { display: flex; align-items: center; justify-content: center; justify-self: stretch; min-height: 46px; min-width: 0; margin: 0; padding: 10px 12px; border: 1px solid #d1dfcb; border-radius: 10px; color: #456843; background: #fff; font-size: 14px; line-height: 1.7; }
.board-shell--formulations .formulations-dialog .dialog-actions > button[type="submit"] { color: #fff; border-color: #2d704e; background: #2d704e; }
.board-shell--formulations .formulations-dialog fieldset { display: grid; gap: 16px; min-width: 0; padding: 18px; margin: 0; border: 1px solid #dfe7d8; border-radius: 10px; background: #fafcf7; }
.board-shell--formulations .formulations-dialog legend { padding-inline: 8px; color: #5c7950; font-size: 14px; }
.board-shell--formulations .formulations-dialog .repeat-row { display: grid; gap: 14px; min-width: 0; border-bottom: 1px solid #dfe7d8; padding-bottom: 16px; }
.board-shell--formulations .formulations-dialog > div { padding: 0; }
.board-shell--formulations .form-error { margin: 0; padding: 12px 15px; border: 1px solid #ead6cc; border-radius: 9px; background: #fff7f1; color: #884832; font-size: 14px; line-height: 1.9; }
@media (max-width:1100px) { .board-shell--formulations .formulation-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width:780px) {
  .board-shell--formulations .formulations-content { padding: 22px; }
  .board-shell--formulations .panel-heading { flex-direction: column; gap: 14px; }
  .board-shell--formulations .product-relations-grid { grid-template-columns: 1fr; }
  .board-shell--formulations .inline-form { grid-template-columns: 1fr; }
}
@media (max-width:480px) {
  .board-shell--formulations .formulations-intro { margin: 18px 0; }
  .board-shell--formulations .formulations-intro h2 { font-size: 26px; }
  .board-shell--formulations .formulation-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); padding-inline: 10px; }
  .board-shell--formulations .formulation-tabs button { min-height: 47px; font-size: 12px; padding-block: 9px; }
  .board-shell--formulations .formulations-content { padding: 20px 16px; }
  .board-shell--formulations .record-card { padding: 17px; }
  .board-shell--formulations .panel-actions { width: 100%; }
  
  .board-shell--formulations .formulations-dialog h3 { font-size: 19px; }
  .board-shell--formulations .formulations-dialog .dialog-actions { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; padding: 14px 18px; bottom: 0; }
}

.board-shell--formulations .formulations-dialog :is(form,div) > header { padding: 24px 26px 20px; border-bottom: 1px solid #e7ece3; background: #fbfcf9; }
.board-shell--formulations .formulations-dialog header :is(.form-intro,.form-code-note) { margin-top: 8px; }
.board-shell--formulations .formulations-form-body { padding: 24px 26px; }
.board-shell--formulations .formulations-dialog .form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; min-width: 0; }
.board-shell--formulations .formulations-dialog .form-full { grid-column: 1 / -1; min-width: 0; }
.board-shell--formulations .formulations-dialog .form-segment h4 { margin: 0 0 14px; color: #476b3f; font-size: 16px; }
.board-shell--formulations .formulations-dialog .formula-grid { display: grid; grid-template-columns: 1fr; gap: 16px; min-width: 0; }
.board-shell--formulations .formulations-dialog .formula-grid fieldset { grid-template-columns: minmax(75px,1fr) minmax(0,3fr) minmax(0,2fr); }
.board-shell--formulations .formulations-dialog .formula-grid fieldset:has(textarea) { grid-template-columns: minmax(75px,1fr) minmax(0,5fr); }
.board-shell--formulations .formulations-dialog .formula-grid fieldset > button { grid-column: 1 / -1; }
.board-shell--formulations .formulations-dialog .form-error { margin-top: 16px; }
@media (max-width:480px) {
  .board-shell--formulations .formulations-dialog :is(form,div) > header { padding: 20px 18px 16px; }
  .board-shell--formulations .formulations-form-body { padding: 20px 18px; }
  .board-shell--formulations .formulations-dialog :is(.form-grid,.formula-grid fieldset,.formula-grid fieldset:has(textarea)) { grid-template-columns: 1fr; }
}

.board-shell--formulations .formulations-dialog .form-grid > button[data-action="start-new-product-category"] { grid-column: 2; }
.board-shell--formulations .formulations-dialog button[data-action="cancel-new-product-category"]:not(.button):not(:disabled) { color: #4a7242; background: #fff; border-color: #d3dfcd; }
@media(max-width:480px) { .board-shell--formulations .formulations-dialog .form-grid > button[data-action="start-new-product-category"] { grid-column: auto; } }

/* Material entry and dated estimates belong beside the formula they describe. */
.board-shell--formulations .formulations-dialog.wide-dialog { width: min(1100px,calc(100vw - 28px)) !important; }
.board-shell--formulations .materials-primary-action { margin-top: 14px; padding: 10px 16px; min-height: 44px; border-color: #bdd5c3; background: #f0f7ef; color: #286344; font-size: 14px; }
.board-shell--formulations .estimate-settings { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 18px; max-width: 560px; margin-bottom: 12px; }
.board-shell--formulations .estimate-hint { color: #677969; font-size: 12px; line-height: 1.9; margin: 10px 0; }
.board-shell--formulations .formulations-dialog .estimate-hint { margin: 12px 0; }
.board-shell--formulations .material-entry-table { display: grid; gap: 18px; margin-top: 18px; }
.board-shell--formulations .formulations-dialog .material-entry-row { display: grid; grid-template-columns: 65px minmax(150px,2fr) repeat(4,minmax(100px,1fr)); gap: 12px; padding: 16px; background: #fcfdfb; }
.board-shell--formulations .formulations-dialog .material-entry-row label { grid-template-rows: 42px 46px; font-size: 12px; gap: 6px; }
.board-shell--formulations .estimate-readonly-field { display: flex; align-items: center; min-height: 46px; padding: 9px 12px; border: 1px solid #e0e7dc; border-radius: 9px; background: #f1f5ef; color: #476147; font-size: 14px; overflow-wrap: anywhere; }
.board-shell--formulations .material-row-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; grid-column: 1 / -1; border-top: 1px solid #e8ede4; padding-top: 12px; font-size: 12px; color: #6c7a61; }
.board-shell--formulations .formulations-dialog .text-button { min-height: 32px; border-color: transparent; background: transparent; padding: 4px 0; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.board-shell--formulations .formulations-dialog .material-row-footer button[data-action="remove-formula-line"] { margin-inline-start: auto; color: #8a6859; }
.board-shell--formulations .formulations-dialog .add-material-button { margin-top: 16px; padding: 10px 18px; background: #f3f8ef; border-color: #c7dbc0; }
.board-shell--formulations [data-estimate-totals] { margin-top: 20px; padding: 18px; border: 1px solid #d8e6d2; border-radius: 11px; background: #f5f9f1; }
.board-shell--formulations .estimate-summary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.board-shell--formulations .estimate-summary-grid > div { display: grid; align-content: start; gap: 8px; }
.board-shell--formulations .estimate-summary-grid span { font-size: 12px; color: #6e8065; }
.board-shell--formulations .estimate-summary-grid strong { font-size: 17px; color: #315e3a; overflow-wrap: anywhere; }
.board-shell--formulations .version-estimate-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; padding: 12px 15px; background: #f2f8ee; border-radius: 9px; font-size: 14px; color: #43683e; }
.board-shell--formulations .version-estimate-summary small { color: #6d7b63; }
.board-shell--formulations .estimate-history { margin-top: 14px; font-size: 13px; line-height: 1.9; }
.board-shell--formulations .estimate-history > details { margin: 12px 0; padding: 12px; border: 1px solid #e2e8dc; border-radius: 9px; }
.board-shell--formulations .estimate-history summary { cursor: pointer; color: #4e6f46; }
.board-shell--formulations .saved-estimate { margin: 14px 0; padding: 18px; border: 1px solid #e1e7d9; border-radius: 11px; background: #fbfdf8; }
.board-shell--formulations .saved-estimate h4 { font-size: 15px; margin: 0 0 10px; }
.board-shell--formulations .saved-estimate p { margin-block: 12px; font-size: 13px; line-height: 1.9; }
.board-shell--formulations .saved-estimate td small { display: block; color: #806c4f; font-size: 11px; }
.board-shell--formulations .research-formula-summary { display: grid; gap: 8px; margin: 16px 0; padding: 15px; border: 1px solid #e2e9da; border-radius: 9px; background: #f8fbf4; font-size: 13px; }
.board-shell--formulations .materials-context { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 20px; padding: 15px; border: 1px solid #d8e3d0; border-radius: 10px; background: #f5f8ed; font-size: 13px; }
.board-shell--formulations .materials-context button { min-height: 40px; padding: 8px 14px; border: 1px solid #bdcfb1; border-radius: 8px; background: #fff; color: #416238; }
@media(max-width:1000px) {
  .board-shell--formulations .formulations-dialog .material-entry-row { grid-template-columns: 65px minmax(0,2fr) minmax(0,1fr); }
  .board-shell--formulations .formulations-dialog .material-entry-row label { grid-template-rows: 26px 46px; }
}
@media(max-width:600px) {
  .board-shell--formulations .formulations-dialog .material-entry-row { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 14px; }
  .board-shell--formulations .material-entry-row .material-name { grid-column: 1 / -1; grid-row: 1; }
  .board-shell--formulations .estimate-settings { grid-template-columns: 1fr; gap: 14px; }
  .board-shell--formulations .estimate-summary-grid { grid-template-columns: 1fr; gap: 14px; }
  .board-shell--formulations .estimate-summary-grid > div { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 12px; }
  .board-shell--formulations .estimate-summary-grid strong { font-size: 15px; }
  .board-shell--formulations .saved-estimate { padding: 12px; }
}

/* The two formula starts are peer choices, with comfortable touch targets. */
[data-page="formulations"] .formula-origin-dialog{width:min(620px,calc(100vw - 28px))}
[data-page="formulations"] .formula-origin-dialog .record-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;border:0;padding:0;margin:0}
[data-page="formulations"] .formula-origin-dialog .record-actions button{width:100%;min-height:84px;padding:18px 14px;font-size:15px;border-radius:12px;border:1px solid #cddccd;background:#f8fbf6;color:#345f41;line-height:1.8}
[data-page="formulations"] .formula-origin-dialog .record-actions button:hover{background:#edf5e9;border-color:#8aad88}
[data-page="formulations"] .formula-origin-dialog .formulations-form-body>p{margin:18px 0 0;line-height:1.9;color:#6d7e65}
@media(max-width:480px){[data-page="formulations"] .formula-origin-dialog .record-actions{grid-template-columns:1fr;gap:12px}[data-page="formulations"] .formula-origin-dialog .record-actions button{min-height:66px}}