/* Controlled ration formulation workspace. */
.ration-workspace { display: grid; gap: 16px; }
.ration-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ration-summary-card { min-height: 98px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(135deg, #fff, #f5faf8); }
.ration-summary-card small { display: block; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .15px; }
.ration-summary-card b { display: block; margin-top: 11px; color: var(--ink); font-size: 25px; line-height: 1; }
.ration-summary-card span { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.ration-guidance { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(230px, .55fr); gap: 14px; padding: 17px; border: 1px solid #cfe4dc; border-radius: 14px; background: linear-gradient(110deg, #f1f9f5, #fbfdfc); }
.ration-guidance h2 { margin: 3px 0 4px; color: var(--ink); font-size: 16px; }
.ration-guidance p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.ration-safety-note { padding: 12px 13px; border: 1px solid #f1ddb9; border-radius: 10px; background: #fffaf0; color: #855b22; font-size: 10px; line-height: 1.5; }
.ration-safety-note b { display: block; margin-bottom: 2px; font-size: 10px; }
.formula-name { display: flex; align-items: center; gap: 8px; }
.formula-name > i { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; background: var(--green-pale); color: var(--green-dark); font-style: normal; font-weight: 900; }
.formula-name small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.formula-nutrients { display: grid; grid-template-columns: repeat(3, max-content); gap: 3px 10px; color: var(--muted); font-size: 10px; }
.formula-nutrients b { color: var(--ink); font-size: 11px; }
.formula-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.formula-actions .link-btn { padding: 0; }
.analysis-library { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .85fr); gap: 15px; }
.analysis-record { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid #edf2ef; }
.analysis-record:first-of-type { border-top: 0; }
.analysis-record b { color: var(--ink); font-size: 12px; }
.analysis-record p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.analysis-record .analysis-values { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, auto); align-content: start; gap: 4px 9px; color: var(--muted); font-size: 10px; text-align: end; }
.analysis-record .analysis-values b { color: var(--green-dark); font-size: 10px; }
form.modal[data-workflow="feed-analysis"], form.modal[data-workflow="ration-formulation"] { width: min(1060px, 100%); }
.formulator-intro { margin: 0 0 16px; padding: 11px 13px; border: 1px solid #cfe4dc; border-radius: 10px; background: #f2f9f5; color: #35695f; font-size: 11px; line-height: 1.45; }
.formulator-intro b { color: var(--green-dark); }
.formulator-analysis-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formulator-component-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.formulator-component-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 13px 15px; border-bottom: 1px solid var(--line); background: #f8fbfa; }
.formulator-component-head h3 { margin: 0; color: var(--ink); font-size: 13px; }
.formulator-component-head p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.formulator-total { flex: 0 0 auto; border: 1px solid #cde4db; border-radius: 999px; padding: 5px 9px; background: #fff; color: var(--green-dark); font-size: 10px; font-weight: 800; }
.formulator-total.is-invalid { border-color: #efc9bd; color: #b85641; }
.formulator-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.formulator-table th { padding: 9px 10px; background: #fff; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .5px; text-align: start; text-transform: uppercase; }
.formulator-table td { padding: 10px; border-top: 1px solid #edf2ef; vertical-align: middle; color: var(--ink-2); }
.formulator-table tr.selected { background: #f5fbf8; }
.formulator-choice { display: flex; align-items: center; gap: 8px; min-width: 210px; }
.formulator-choice input { accent-color: var(--green); }
.formulator-choice b { display: block; color: var(--ink); font-size: 11px; }
.formulator-choice small { display: block; margin-top: 1px; color: var(--muted); font-size: 9px; }
.formulator-table select, .formulator-table input { min-width: 82px; border: 1px solid #ceddd8; border-radius: 7px; padding: 7px 8px; background: #fff; color: var(--ink); font: inherit; }
.formulator-table input { width: 76px; }
.formulator-table .muted-value { color: var(--muted); font-size: 10px; }
.formula-preview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.formula-preview-grid > div { padding: 10px; border: 1px solid #e2ede8; border-radius: 9px; background: #fbfdfc; }
.formula-preview-grid small { display: block; color: var(--muted); font-size: 9px; }
.formula-preview-grid b { display: block; margin-top: 4px; color: var(--green-dark); font-size: 13px; }
@media (max-width: 980px) { .ration-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ration-guidance, .analysis-library { grid-template-columns: 1fr; } .formulator-analysis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .formulator-component-wrap { overflow-x: auto; } .formulator-table { min-width: 760px; } }
@media (max-width: 600px) { .ration-summary, .formulator-analysis-grid, .formula-preview-grid { grid-template-columns: 1fr; } .analysis-record { display: block; } .analysis-record .analysis-values { margin-top: 9px; text-align: start; } }