.visuallyHidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.contractLibrary{margin:18px 0;padding:22px;border:1px solid #cbdadf;border-radius:14px;background:#f7fbfc}
.contractLibrary h3{margin:0 0 5px}.contractSearch{display:flex;gap:10px;align-items:end;margin:12px 0}.contractSearch label{flex:1;margin:0}.contractSearch input{width:100%;background:#fff}.contractSearch button{flex:none;min-height:44px}
.contractHistoryResults{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.contractHistoryCard{background:#fff;border:1px solid #dce5e8;border-radius:12px;padding:16px;display:flex;gap:14px;justify-content:space-between;align-items:flex-start;min-width:0}.contractHistoryCard>div{min-width:0}.contractHistoryCard h4{font-size:15px;line-height:1.5;margin:0 0 5px;overflow-wrap:anywhere}.contractHistoryCard p{margin:7px 0;overflow-wrap:anywhere}.contractHistoryCard button{flex:none;white-space:nowrap;font-size:12px;min-height:38px}.contractModelTags{display:flex;gap:5px;flex-wrap:wrap}.contractModelTags span{font-size:11px;background:#eef5f7;border-radius:5px;padding:3px 6px;max-width:100%;overflow-wrap:anywhere;color:#234757}.contractReviewFlag{color:#86641f}.contractPagination{display:flex;align-items:center;justify-content:center;gap:16px;margin:18px 0 8px}.contractPagination span{font-size:13px;color:#536d78}
.contractHistoryDialog{width:min(880px,94vw);max-width:94vw;max-height:90vh;overflow:auto}.contractHistoryDialog h3{margin:15px 0 6px;font-size:20px}.contractHistoryDialog table{width:100%;font-size:13px}.contractHistoryDialog th,.contractHistoryDialog td{padding:10px 12px;text-align:left;vertical-align:top;overflow-wrap:anywhere}.contractHistoryDialog th{background:#eaf1f4}.contractHistoryDialog pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:250px;overflow:auto;font:13px/1.7 inherit}.contractSourceFacts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.contractSourceFacts p{background:#f2f6f8;border-radius:8px;padding:12px;margin:0}.contractSourceFacts span,.contractSourceFacts strong{display:block}.contractSourceFacts span{color:#607986;font-size:12px;margin-bottom:6px}.contractSourceFacts strong{font-size:14px;overflow-wrap:anywhere}.contractReviewNotes{padding:12px 16px;border-left:3px solid #b59144;background:#fff9ec;margin:15px 0}.contractReviewNotes h4{margin:0}.contractReviewNotes ul{padding-left:20px;font-size:13px;line-height:1.7;margin-bottom:0}
.contractChecklist{margin:18px 0;background:#f3f7f8;padding:16px;border-radius:10px}.contractChecklist h4{margin:0 0 10px}.contractChecklist>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.contractChecklist button{display:flex;gap:8px;align-items:center;text-align:left;background:#fff;border:1px solid #d5e0e4;font-size:12px;min-height:40px;padding:8px 10px}.contractChecklist button span{font-size:11px;flex:none}.contractChecklist .checkComplete span{color:#287254}.contractChecklist .checkPending span{color:#987121}.contractExportActions{position:relative;flex-wrap:wrap}.contractExportActions .primary{min-height:44px}#wfQuantityPanel textarea{min-height:110px}#wfQuantityStatus{color:#315d6c}
.contractMode .workflowTable input[data-key="quantity"]{background:#f1faf7;border-color:#7eaa9c}.contractMode .workflowTable input[readonly]{background:#f4f6f7;color:#50616a}.contractMode #wfExcel,.contractMode #wfCsv{font-size:12px;background:transparent;color:#60737c;border-color:transparent}.contractMode .workflowSteps{margin-bottom:16px}
@media(max-width:1050px){.contractHistoryResults{grid-template-columns:1fr}.contractChecklist>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.contractLibrary{padding:14px;margin:12px 0}.contractHistoryCard{padding:12px;gap:8px}.contractHistoryCard button{padding:8px;font-size:11px}.contractSourceFacts{grid-template-columns:1fr}.contractHistoryDialog{padding:14px;width:94vw;max-width:94vw}.contractHistoryDialog .dialogFoot{display:grid;grid-template-columns:1fr;width:100%}.contractChecklist>div{grid-template-columns:1fr}.contractExportActions>button{flex:1 1 42%;min-height:42px}.contractSearch{gap:7px}.contractSearch button{padding:10px}.contractPagination{gap:10px}.contractHistoryDialog .workflowTable{max-width:100%;overflow:auto}}

/* Compact employee contract choices; product name stays in the option panel. */
.contractChoiceField{display:flex;align-items:stretch;position:relative;min-width:0}.contractChoiceField input{min-width:0;width:100%;border-radius:6px 0 0 6px!important}.contractChoiceField>button{flex:none;width:30px;min-height:40px;padding:0;border-radius:0 6px 6px 0;border-left:0;font-size:17px;color:#246b66;background:#edf8f5}.contractChoiceField>button:focus-visible{outline:3px solid #308e83;outline-offset:2px}.contractOptionsDialog{width:min(480px,calc(100vw - 28px));max-width:calc(100vw - 28px);max-height:85dvh;overflow:auto;padding:18px;border:1px solid #b7cec8;border-radius:14px;box-shadow:0 20px 80px #173e4b30}.contractOptionsDialog::backdrop{background:#0b233a30}.contractOptionsHeading{display:flex;align-items:center;justify-content:space-between;gap:14px}.contractOptionsHeading h3{font-size:18px;margin:0}.contractOptionsHeading button{min-width:44px;min-height:44px;font-size:22px}.contractOptionsSearch{display:block;margin:12px 0}.contractOptionsSearch input{width:100%;margin-top:6px}.contractOptionResults{display:grid;gap:5px;max-height:36dvh;overflow:auto}.contractOptionItem{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:50px;padding:9px 12px;border:1px solid #dce6e3;border-radius:7px;background:white;overflow-wrap:anywhere}.contractOptionItem strong{font-size:13px}.contractOptionItem span{font-size:11px;color:#61736f}.contractOptionItem:hover{background:#edf8f5}.contractOptionItem:focus-visible,.contractNameEditor summary:focus-visible{outline:3px solid #318e83;outline-offset:1px}.contractNameEditor{margin-top:14px;border-top:1px solid #dde7e3;padding-top:10px}.contractNameEditor summary{cursor:pointer;min-height:44px;line-height:1.5;display:list-item;padding:10px 0;font-size:13px;overflow-wrap:anywhere}.contractNameEditor label{display:block}.contractNameEditor input{width:100%;margin:6px 0 10px}.contractNameEditor button{min-height:40px}.contractOptionsDialog #wfOptionStatus{min-height:2.8em;line-height:1.5}

.frequentPanel{margin-bottom:22px;padding:16px;border:1px solid #9bc4bd;border-radius:12px;background:#fff}.frequentPanel>summary{cursor:pointer;min-height:40px;line-height:1.6;color:#146963}.frequentPanel>summary strong{font-size:17px}.frequentPanel>summary span{margin-left:14px;color:#586f72;font-size:12px}.frequentCustomers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.frequentCustomer{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;min-height:58px;overflow-wrap:anywhere}.frequentCustomer span{font-size:12px;color:#5c7475}.frequentPanel .workflowTable{max-width:100%;overflow:auto}.frequentPanel table{width:100%;min-width:690px;font-size:13px}.frequentPanel th,.frequentPanel td{vertical-align:top;text-align:left;padding:10px 9px;overflow-wrap:anywhere}.frequentPanel td input[type=checkbox]{width:20px;height:20px}.frequentPanel .textAction{padding:4px 0;min-height:36px;background:transparent;border:0;color:#087970}.frequentPanel #cfSelected{overflow-wrap:anywhere;max-height:6em;overflow:auto}.contractComparison{margin:0 0 22px;padding:18px;border:1px solid #c4d7d5;border-radius:12px;background:#fbfdfc}.contractComparison h3{margin-top:0}.comparisonTable{max-width:100%;overflow:auto}.comparisonTable table{width:100%;table-layout:fixed;font-size:13px;border-collapse:collapse}.comparisonTable th,.comparisonTable td{padding:9px 10px;text-align:left;vertical-align:top;border-bottom:1px solid #e0e9e7;overflow-wrap:anywhere;white-space:pre-wrap}.comparisonTable th:first-child{width:25%}.comparisonTable thead{background:#edf4f2}.comparisonTable small{font-size:11px;font-weight:normal;display:inline-block;margin-left:4px;color:#647870}.comparison-changed{background:#fff5df}.comparison-unknown,.comparison-missing{background:#fffbea}.comparison-changed th small{color:#8b5500}.comparisonItem h4{margin:18px 0 8px;font-size:14px;overflow-wrap:anywhere}.contractComparison[hidden]{display:none}
@media(max-width:600px){.frequentPanel,.contractComparison{padding:12px}.frequentPanel>summary span{display:block;margin-left:16px}.frequentCustomers{grid-template-columns:1fr}.comparisonTable th,.comparisonTable td{padding:7px 6px;font-size:12px}.frequentPanel .actions{display:flex;flex-wrap:wrap;gap:8px}.frequentPanel .actions button{min-height:44px}.comparisonTable th:first-child{width:28%}}

/* Readable contract entry and complete SKU search on desktop and touch screens. */
.contractMode #wfReview label,.contractMode #wfFinishPanel label{font-size:15px;line-height:1.6}
.contractMode #wfReview input,.contractMode #wfReview select,.contractMode #wfFinishPanel input,.contractMode #wfFinishPanel select{font-size:16px;min-height:44px}
.contractMode #wfRows td{font-size:15px;vertical-align:top}
.contractMode #wfRows input[data-key="model"]{min-width:245px}
.contractMode #wfAddRow{font-size:16px;min-height:44px;font-weight:600}
.contractOptionsDialog{width:min(620px,calc(100vw - 28px))}
.contractOptionsSearch input,.contractNameEditor input{font-size:16px;min-height:44px}
.contractOptionItem{min-height:62px;padding:12px 14px}
.contractOptionItem strong{font-size:16px;line-height:1.5}
.contractOptionItem span,.contractOptionsDialog #wfOptionStatus,.contractNameEditor summary{font-size:14px;line-height:1.6}
.contractOptionsDialog .contractPagination{gap:10px;flex-wrap:wrap}
.contractOptionsDialog .contractPagination button{min-height:44px;font-size:14px}
.contractOptionsDialog #wfOptionManual{min-height:44px;font-size:15px;width:100%}
@media(max-width:600px){.contractOptionsDialog{padding:14px}.contractOptionResults{max-height:32dvh}.contractMode #wfRows input[data-key="model"]{min-width:220px}}
.contractMode #wfReview table{min-width:1070px;width:100%;table-layout:fixed}
.contractMode #wfReview th:nth-child(1){width:32px}.contractMode #wfReview th:nth-child(2){width:280px}.contractMode #wfReview th:nth-child(3){width:135px}.contractMode #wfReview th:nth-child(4){width:120px}.contractMode #wfReview th:nth-child(5){width:85px}.contractMode #wfReview th:nth-child(6){width:95px}.contractMode #wfReview th:nth-child(8){width:120px}.contractMode #wfReview th:nth-child(9){width:110px}.contractMode #wfReview th:nth-child(10){width:48px}
.contractMode #wfReview input{min-width:0}.contractMode #wfReview input[data-key="model"]{min-width:0}.contractMode #wfReview td{overflow-wrap:anywhere}

/* History columns are model-first, unlike the editable row-number table. */
.contractHistoryDialog .workflowTable table{min-width:640px;table-layout:fixed;font-size:14px}
.contractHistoryDialog .workflowTable td:nth-child(n){width:auto;min-width:0}
.contractHistoryDialog .workflowTable th:nth-child(1){width:44%}.contractHistoryDialog .workflowTable th:nth-child(2){width:10%}.contractHistoryDialog .workflowTable th:nth-child(3){width:12%}.contractHistoryDialog .workflowTable th:nth-child(4){width:16%}.contractHistoryDialog .workflowTable th:nth-child(5){width:18%}