/* Workshop only: tablet/phone layout and touch controls. */ #workshopPortal,#workshopPortal *,#modalRoot .ws-parity *{box-sizing:border-box} #workshopPortal{width:100%;min-width:0} #workshopPortal :is(section,form,fieldset,.intake-grid>*,.wizard-panel){min-width:0} #workshopPortal :is(input,select,textarea){max-width:100%;font-size:16px} #workshopPortal :is(button,nav a){min-height:44px;touch-action:manipulation} #workshopPortal :is(.table,.table-wrap){max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} #workshopPortal :is(img,video,audio){max-width:100%} #workshopPortal :is(h1,h2,h3,p,summary){overflow-wrap:anywhere} #workshopPortal .intake-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #workshopPortal .damage-tabs{display:flex;flex-wrap:wrap;gap:6px} #workshopPortal .damage-tabs button{margin:0} #workshopPortal [data-damage-canvas]{max-width:100%} #workshopPortal fieldset{margin-inline:0} body:has(#content .workshop-tabs) #content{min-width:0} body:has(#content .workshop-tabs) #content :is(.table-wrap,.table-responsive){max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} body:has(#content .workshop-tabs) #content :is(.workshop-actions,.workshop-tabs,.workshop-filter){flex-wrap:wrap} #modalRoot:has(.ws-parity,.workshop-summary,.workshop-flow) .modal{max-width:calc(100vw - 24px)!important} #modalRoot .ws-parity :is(input,select,textarea){font-size:16px!important} #modalRoot .ws-parity :is(button,.modal-close){min-height:44px} #modalRoot .ws-parity .modal-close{min-width:44px} #modalRoot .ws-parity :is(.table,.table-wrap){max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} @media(max-width:1100px){ #workshopPortal{margin:12px auto;padding:12px} #workshopPortal>header{gap:14px;padding:20px} #workshopPortal>header nav{flex-wrap:wrap;gap:8px} #workshopPortal>header nav :is(a,button){margin:0} #workshopPortal>section{padding:20px} #workshopPortal .photo-slot-actions button,#modalRoot .ws-parity .photo-slot-actions button{min-height:44px} } @media(max-width:700px){ #workshopPortal{margin:0 auto;padding:10px} #workshopPortal>header{padding:16px;gap:12px} #workshopPortal>header nav{width:100%;display:flex} #workshopPortal>header nav :is(a,button){flex:1 1 auto;white-space:normal;text-align:center} #workshopPortal>section{padding:16px;margin:12px 0;border-radius:12px} #workshopPortal h1{font-size:23px} #workshopPortal h2{font-size:21px} #workshopPortal .intake-grid{grid-template-columns:minmax(0,1fr);gap:14px} #workshopPortal .intake-grid .full{grid-column:1} #workshopPortal :is(.wizard-panel,.job-details,.photo-upload,[data-damage-editor]){padding:12px} #workshopPortal .table table{min-width:620px} #workshopPortal .wizard-progress{grid-template-columns:repeat(2,minmax(0,1fr))} #workshopPortal .wizard-actions{display:flex;flex-wrap:wrap;gap:8px} #workshopPortal .wizard-actions button{flex:1 1 auto;margin:0;white-space:normal} body:has(#content .workshop-tabs) #content :is(.workshop-actions,.workshop-tabs){gap:8px} body:has(#content .workshop-tabs) #content .workshop-actions .btn{white-space:normal;min-height:44px} body:has(#content .workshop-tabs) #content .workshop-filter :is(input,select){min-width:0;width:100%;flex-basis:100%;font-size:16px} #modalRoot:has(.ws-parity,.workshop-summary,.workshop-flow) .modal-backdrop{padding:8px!important} #modalRoot:has(.ws-parity,.workshop-summary,.workshop-flow) .modal{max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 32px)!important} #modalRoot .ws-parity>.modal-body{min-height:0;overflow:auto;max-height:calc(100dvh - 112px)!important;padding:12px!important} #modalRoot .ws-parity :is(.ws-form-actions,.wizard-actions){flex-wrap:wrap;gap:8px} #modalRoot .ws-parity .ws-form-actions button{flex:1 1 auto} #modalRoot .ws-parity .damage-tabs{gap:6px} #modalRoot .ws-parity .damage-tabs button{margin:0} } @media(max-width:800px){ #workshopPortal .workshop-jobs-table{overflow:visible;border:0} #workshopPortal .workshop-jobs-table table{display:block;width:100%;min-width:0!important} #workshopPortal .workshop-jobs-table thead{display:none} #workshopPortal .workshop-jobs-table tbody{display:grid;gap:12px} #workshopPortal .workshop-jobs-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px;border:1px solid var(--line,#bfd6c8);border-radius:10px} #workshopPortal .workshop-jobs-table td{display:block;padding:0;border:0;min-width:0;overflow-wrap:anywhere} #workshopPortal .workshop-jobs-table td::before{display:block;font-size:11px;opacity:.75;margin-bottom:4px} #workshopPortal .workshop-jobs-table td:nth-child(1)::before{content:'Job'} #workshopPortal .workshop-jobs-table td:nth-child(2)::before{content:'Vehicle'} #workshopPortal .workshop-jobs-table td:nth-child(3)::before{content:'Status'} #workshopPortal .workshop-jobs-table td:nth-child(4)::before{content:'Bay'} #workshopPortal .workshop-jobs-table td:nth-child(5)::before{content:'Technician'} #workshopPortal .workshop-jobs-table td:last-child{grid-column:1/-1} #workshopPortal .workshop-jobs-table select{width:100%!important;min-width:0!important;max-width:100%;margin:0} #workshopPortal .workshop-jobs-table .job-row-actions{display:flex;flex-wrap:wrap;gap:8px} #workshopPortal .workshop-jobs-table .job-row-actions button{flex:1 1 120px;white-space:normal;margin:0;min-width:0} } @media(max-width:800px){ #workshopPortal .workshop-flow.workshop-quotation-only .wf-line{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,1fr) 30px!important;gap:12px 8px!important;align-items:start} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>.wf-row-number{grid-column:1;grid-row:1;align-self:end} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>.wf-code-cell{grid-column:2/4;grid-row:1} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>[data-q-remove]{grid-column:4;grid-row:1;align-self:end} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>.wf-product-cell{grid-column:1/-1;grid-row:2} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>label:nth-child(4){grid-column:1/3;grid-row:3} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>label:nth-child(5){grid-column:3/5;grid-row:3} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>[data-q-total]{grid-column:1/-1;grid-row:4;width:100%;min-width:0} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>[data-q-total]::before{content:'Line total';float:left;font-weight:400} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line label{display:block;min-width:0;width:100%;margin:0} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line label>span{display:block;font-size:12px;line-height:1.5;margin-bottom:5px} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line label input{width:100%!important;min-width:0!important;max-width:100%;height:40px!important;min-height:40px!important;font-size:14px!important} #workshopPortal .workshop-flow .wf-quote-footer{flex-wrap:wrap} #workshopPortal .workshop-flow .wf-quote-footer>span{width:100%;overflow-wrap:anywhere} } #workshopPortal .workshop-jobs-table .job-vehicle-number{display:block;font-size:15px;letter-spacing:.2px} #workshopPortal .workshop-jobs-table .job-vehicle-model{display:block;margin-top:3px;font-size:12px;opacity:.75} #workshopPortal .workshop-jobs-table .job-status-pill{display:inline-block;border:1px solid #67948266;border-radius:20px;padding:3px 9px;font-size:11px;font-weight:600;line-height:1.5;text-transform:capitalize;background:#6ba38618} @media(max-width:800px){ #workshopPortal .workshop-jobs-table{margin-top:18px} #workshopPortal .workshop-jobs-table tbody{gap:14px} #workshopPortal .workshop-jobs-table tr{grid-template-areas:'vehicle vehicle' 'job status' 'bay technician' 'actions actions';grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;padding:16px;border-radius:12px} #workshopPortal .workshop-jobs-table td:nth-child(1){grid-area:job;font-size:12px} #workshopPortal .workshop-jobs-table td:nth-child(2){grid-area:vehicle;padding-bottom:12px;border-bottom:1px solid var(--line,#bfd6c8)} #workshopPortal .workshop-jobs-table td:nth-child(2)::before{display:none} #workshopPortal .workshop-jobs-table td:nth-child(3){grid-area:status;text-align:right} #workshopPortal .workshop-jobs-table td:nth-child(4){grid-area:bay} #workshopPortal .workshop-jobs-table td:nth-child(5){grid-area:technician} #workshopPortal .workshop-jobs-table td:last-child{grid-area:actions;padding-top:12px;border-top:1px solid var(--line,#bfd6c8)} #workshopPortal .workshop-jobs-table .job-vehicle-number{font-size:19px;line-height:1.3} #workshopPortal .workshop-jobs-table td::before{font-size:10px;letter-spacing:.3px;margin-bottom:5px} #workshopPortal .workshop-jobs-table select{height:42px;min-height:42px;padding:8px 10px;font-size:14px} #workshopPortal .workshop-jobs-table .job-row-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) 42px;gap:8px;align-items:center} #workshopPortal .workshop-jobs-table .job-row-actions button{height:42px;min-height:42px;padding:8px;font-size:12px;line-height:1.3;width:100%} #workshopPortal .workshop-jobs-table [data-row-save]{grid-column:1/-1} #workshopPortal .workshop-jobs-table [data-row-save]:disabled{display:none} #workshopPortal .workshop-jobs-table .job-row-actions .job-delete{width:42px;min-width:42px;padding:0;display:inline-flex;align-items:center;justify-content:center} #workshopPortal .workshop-jobs-table .job-delete .lo-icon{margin:0} } /* Product code remains internal; quotation display uses description only. */ #workshopPortal .workshop-flow .wf-code-cell,#workshopPortal .workshop-flow .wf-parts-head>span:nth-child(2){display:none!important} @media(min-width:801px){#workshopPortal .workshop-flow :is(.wf-parts-head,.wf-line){grid-template-columns:28px minmax(0,3fr) minmax(0,.6fr) minmax(0,.8fr) minmax(0,.9fr) 30px!important}} @media(max-width:800px){ #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>.wf-product-cell{grid-column:1/-1;grid-row:2} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>.wf-row-number{grid-row:1;align-self:center} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>[data-q-remove]{grid-row:1;align-self:center} } /* Compact quotation rows, including Inventory labour at a fixed quantity of one. */ #workshopPortal .workshop-flow.workshop-quotation-only .wf-line[data-labour='1']>label:nth-child(4){display:none!important} #workshopPortal .workshop-flow .wf-parts-head{display:none!important} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line{display:grid;gap:6px!important;padding:7px!important;align-items:end} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line label>span{display:block;font-size:10px;line-height:1.3;margin:0 0 4px} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line label input{height:34px!important;min-height:34px!important;padding:6px 8px!important;font-size:12px!important} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line [data-q-kind]{display:none} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line [data-q-total]{height:48px;min-width:0;width:100%;padding:0 4px 6px!important;background:transparent!important;border:0!important;font-size:12px;line-height:1.4} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line [data-q-total]::before{content:'Total';display:block;float:none;font-size:10px;font-weight:400;margin-bottom:9px} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line [data-q-remove]{align-self:end;margin-bottom:2px!important} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line .wf-product-results{top:52px} @media(min-width:520px){ #workshopPortal .workshop-flow.workshop-quotation-only .wf-line{grid-template-columns:24px minmax(100px,1fr) 50px 76px 76px 30px!important} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>.wf-row-number{grid-column:1;grid-row:1;align-self:center} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>.wf-product-cell{grid-column:2;grid-row:1} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>label:nth-child(4){grid-column:3;grid-row:1} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>label:nth-child(5){grid-column:4;grid-row:1} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>[data-q-total]{grid-column:5;grid-row:1} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>[data-q-remove]{grid-column:6;grid-row:1} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line[data-labour='1']{grid-template-columns:24px minmax(100px,1fr) 90px 90px 30px!important} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line[data-labour='1']>label:nth-child(5){grid-column:3} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line[data-labour='1']>[data-q-total]{grid-column:4} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line[data-labour='1']>[data-q-remove]{grid-column:5} } @media(max-width:519px){ #workshopPortal .workshop-flow.workshop-quotation-only .wf-line{grid-template-columns:repeat(6,minmax(0,1fr))!important} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>.wf-row-number{grid-column:1;grid-row:1;justify-self:start} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>.wf-product-cell{grid-column:2/6;grid-row:1} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>[data-q-remove]{grid-column:6;grid-row:1;justify-self:end} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>label:nth-child(4){grid-column:1/3;grid-row:2} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>label:nth-child(5){grid-column:3/5;grid-row:2} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line>[data-q-total]{grid-column:5/7;grid-row:2} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line[data-labour='1']>label:nth-child(5){grid-column:1/4} #workshopPortal .workshop-flow.workshop-quotation-only .wf-line[data-labour='1']>[data-q-total]{grid-column:4/7} } #workshopPortal .po-approvals-heading,#workshopPortal .po-approval-title{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} #workshopPortal .po-approvals-heading h2 small{display:inline-block;font-size:12px;font-weight:500;margin-left:8px} #workshopPortal .po-approval-list{display:grid;gap:14px} #workshopPortal .po-approval-card{padding:16px;border:1px solid var(--line,#bfd6c8);border-radius:10px;min-width:0} #workshopPortal .po-approval-title small{display:block;margin-top:4px;font-size:12px} #workshopPortal .po-approval-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0;font-size:12px;opacity:.8;overflow-wrap:anywhere} #workshopPortal .po-approval-card summary{font-size:13px;font-weight:600;cursor:pointer} #workshopPortal .po-approval-card .table{max-width:100%;overflow-x:auto} #workshopPortal .po-approval-card table{min-width:0!important;width:100%;font-size:12px} #workshopPortal .po-approval-card :is(td,th){padding:8px;overflow-wrap:anywhere} #workshopPortal .workshop-current-job>:not(.current-job-dashboard):not([data-wf-form]):not([role=alert]){display:none!important} #workshopPortal .workshop-current-job{padding:0;border:0;background:transparent} #workshopPortal .current-stage-summary{border:1px solid var(--line,#bfd6c8);border-left:4px solid #348e69;border-radius:10px;padding:16px;margin-bottom:16px} #workshopPortal .current-stage-summary h3{margin:4px 0 8px;font-size:21px} #workshopPortal .current-stage-summary p{margin:4px 0;font-size:13px;line-height:1.6} #workshopPortal .current-stage-meta{display:flex;flex-wrap:wrap;gap:10px 20px;font-size:12px;margin-top:14px} #workshopPortal .current-document-tabs,#workshopPortal .current-job-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0} #workshopPortal .current-document-tabs button{margin:0;min-height:40px;font-size:13px} #workshopPortal .current-document-tabs [aria-pressed=true]{outline:2px solid #71b391;outline-offset:1px} #workshopPortal .current-document-panel{padding:16px;margin:16px 0 0;border-radius:10px;min-width:0} #workshopPortal .current-document-panel[hidden]{display:none!important} #workshopPortal .current-document-panel h4{margin:0 0 12px} #workshopPortal .current-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #workshopPortal .current-review-grid label{margin:0;font-size:12px;min-width:0} #workshopPortal .current-review-full{grid-column:1/-1} #workshopPortal .current-review-grid textarea{min-height:84px;font-size:14px} #workshopPortal .current-review-saved{font-size:11px;opacity:.75} #workshopPortal .current-document-total{text-align:right;font-weight:700} #workshopPortal .current-document-panel table{min-width:0!important;width:100%} #workshopPortal .current-document-panel :is(td,th){padding:9px;font-size:12px;overflow-wrap:anywhere} #workshopPortal .current-document-panel form{margin-bottom:22px} @media(max-width:600px){#workshopPortal .current-review-grid{grid-template-columns:minmax(0,1fr)}#workshopPortal .current-document-tabs button{flex:1 1 130px}#workshopPortal .current-stage-summary h3{font-size:18px}#workshopPortal .current-document-panel{padding:12px}} /* Current stage belongs beside the job heading. */ #workshopPortal .wf-completed-text.current-stage-heading{font-size:clamp(18px,2.2vw,25px);font-weight:750;line-height:1.25;color:var(--text,#dcebe4);padding:8px 14px;border:1px solid var(--line,#527568);border-radius:9px;background:var(--surface-2,#244a3b);white-space:normal} #workshopPortal .current-stage-summary{padding:10px 16px} #workshopPortal .wf-job-heading-row{align-items:center;gap:16px} #workshopPortal .wf-job-heading-row .wf-completed-text.current-stage-heading{flex:0 1 auto;width:auto;max-width:100%;margin-left:auto;box-sizing:border-box;text-align:center} #workshopPortal .checkout-totals{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;padding:16px 0}#workshopPortal .checkout-totals span{display:grid;gap:5px}#workshopPortal .checkout-totals strong{font-size:20px}#workshopPortal .checkout-actions{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}#workshopPortal .checkout-advances{border:1px solid var(--line);border-radius:8px;padding:14px}#workshopPortal .checkout-advances label{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,150px);gap:12px;align-items:center;margin-bottom:8px}#workshopPortal .checkout-confirm{display:flex;gap:10px;align-items:center;margin:14px 0}#workshopPortal .checkout-confirm input{width:auto}#workshopPortal .workshop-checkout form{margin-top:18px}#workshopPortal .checkout-invoice-number{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}