/* Clear priorities across jobs, equipment and client care. */
:is(#mechanicApp,#clientPortal) .btn{min-height:44px;border-radius:10px;font-weight:600}
:is(#mechanicApp,#clientPortal) :is(button,a,input,select,textarea):focus-visible{outline:3px solid #718eff;outline-offset:3px}
:is(#mechanicApp,#clientPortal) :is(.empty-library,.list-empty,.inv-empty,.care-empty,.care-clear){border:1px dashed #cbd6e5;background:#f6f8fc;border-radius:14px;padding:24px;color:#60728b;line-height:1.6}
:is(#mechanicApp,#clientPortal) :is(.empty-library,.inv-empty,.care-empty) strong{color:#19314d}
#mechanicApp #jobWorkspace .workspace-head{padding:20px 24px;gap:20px;align-items:center}
#mechanicApp #jobWorkspace .workspace-head h2{font-size:clamp(25px,3vw,36px);margin:6px 0}
#mechanicApp #jobWorkspace .workspace-repair-title{font-size:14px;margin:5px 0}
#mechanicApp #jobWorkspace .workspace-vehicle-meta{font-size:11px;margin:5px 0;overflow-wrap:anywhere}
#mechanicApp #jobWorkspace .job-next-step{margin:14px 0;padding:16px;min-height:64px}
#mechanicApp #jobWorkspace .job-next-step strong{font-size:17px;line-height:1.4}
#mechanicApp #jobWorkspace .job-next-step small{font-size:10px}
#mechanicApp #jobWorkspace #completeJobBtn{background:transparent;color:#dbe5f3;border:1px solid #63728a}
#toolLibrarySection .catalog-status{font-size:11px;padding:5px 9px;border-radius:6px}
#toolLibrarySection .catalog-status.review{background:#fff1d2;color:#805309}
#toolLibrarySection .owned-tool-facts{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border:0;padding:0;margin:8px 0}
#toolLibrarySection .owned-tool-facts>span{display:grid;gap:5px;align-content:start;padding:10px;background:#f1f5fa;border:1px solid #e4eaf2;border-radius:8px;min-width:0}
#toolLibrarySection .owned-tool-facts small{font:600 9px/1.4 Inter,sans-serif;color:#6a7c94;letter-spacing:.06em}
#toolLibrarySection .owned-tool-facts b{font:500 12px/1.45 Inter,sans-serif;color:#213954;overflow-wrap:anywhere}
#toolLibrarySection .owned-tool-meta .delete-tool{color:#9c3440}
#clientPortal .client-recent-update{display:none}
#clientPortal[data-care-view="home"] .client-recent-update{display:flex;order:-1;align-items:center;gap:20px;padding:22px 24px;border:1px solid #d9e3f2;border-left:4px solid #315bea;border-radius:14px;background:#fff}
#clientPortal .client-recent-update>div{flex:1;min-width:0}
#clientPortal .client-recent-update small{font-size:10px;letter-spacing:.05em;color:#496ba1}
#clientPortal .client-recent-update h2{font-size:21px;line-height:1.3;margin:8px 0}
#clientPortal .client-recent-update p{font-size:14px;line-height:1.6;color:#50647e;margin:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#clientPortal[data-care-view="home"] .client-welcome{display:none}
#clientPortal[data-care-view="home"] .care-home{order:0}
#clientPortal .care-heading h2{font-size:27px;letter-spacing:-.035em}
#clientPortal .care-heading .eyebrow{color:#587295}
@media(max-width:760px){
 #mechanicApp #jobWorkspace .workspace-head{padding:16px;gap:12px}
 #mechanicApp #jobWorkspace .workspace-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
 #mechanicApp #jobWorkspace #enterWorkMode{grid-column:1/-1}
 #mechanicApp #jobWorkspace .workspace-actions :is(button,select){font-size:12px;min-width:0;padding:10px}
 #mechanicApp #jobWorkspace .job-next-step{gap:10px;padding:14px}
 #mechanicApp #jobWorkspace .job-next-step strong{font-size:15px}
 #mechanicApp #jobWorkspace .job-next-action{display:none}
 #clientPortal[data-care-view="home"] .client-recent-update{flex-direction:column;align-items:stretch;gap:14px;padding:18px}
 #clientPortal .client-recent-update h2{font-size:20px}
 #clientPortal .care-heading h2{font-size:24px}
 #toolLibrarySection .owned-tool-facts b{font-size:12px}
}
/* Repair workspace: one section at a time with a compact project brief. */
#mechanicApp #jobWorkspace .job-panel-hidden{display:none!important}
#mechanicApp #jobWorkspace .job-work-grid{display:contents}
#mechanicApp #jobWorkspace .workspace-card{margin-top:18px;border:1px solid #dde5ef;box-shadow:0 5px 20px #19314d04;border-radius:16px}
#mechanicApp #jobWorkspace .workspace-head{background:linear-gradient(115deg,#17283f,#203c5d);border:1px solid #2d4765;padding:22px 26px}
#mechanicApp #jobWorkspace .workspace-head .eyebrow{font:600 10px/1.4 Inter,sans-serif;letter-spacing:.12em}
#mechanicApp #jobWorkspace .workspace-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:330px}
#mechanicApp #jobWorkspace #enterWorkMode{grid-column:1/-1}
#mechanicApp #jobWorkspace .job-stats{margin:14px 0;border-radius:12px;background:#fff}
#mechanicApp #jobWorkspace .job-stats article{padding:14px 18px}
#mechanicApp #jobWorkspace .js-value{font-size:24px;margin:6px 0}
#mechanicApp #jobWorkspace .js-foot{font-size:10px;line-height:1.5}
#mechanicApp #jobWorkspace .job-section-nav{display:flex;gap:5px;padding:6px;border:1px solid #d9e3f0;background:#f8faff;box-shadow:0 3px 10px #19314d05;flex-wrap:wrap;scroll-margin-top:var(--tf-admin-header-height,12px)}
#mechanicApp #jobWorkspace .job-section-nav :is(a,button){display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 15px;font:600 12px/1.3 Inter,sans-serif;border:0;border-radius:8px;color:#526985;background:transparent;cursor:pointer;text-decoration:none}
#mechanicApp #jobWorkspace .job-section-nav .is-selected{background:#315bea;color:#fff;box-shadow:0 3px 7px #315bea20}
#mechanicApp #jobWorkspace .job-section-nav button{margin-left:auto}
#mechanicApp #jobWorkspace .job-context{margin:16px 0;background:#fff;border:1px solid #dce4ef;border-radius:12px}
#mechanicApp #jobWorkspace .job-context>summary{padding:16px 18px;cursor:pointer;font:600 13px/1.5 Inter,sans-serif;color:#243d5c}
#mechanicApp #jobWorkspace .job-context>summary span{font-weight:400;color:#718299;margin-left:14px;font-size:12px}
#mechanicApp #jobWorkspace .job-context .job-info-grid{margin:0;border:0;border-top:1px solid #e3eaf3;box-shadow:none}
#mechanicApp #jobWorkspace .job-findings .text-action{display:inline-flex;margin:8px 16px 0 0;min-height:36px;align-items:center}
#mechanicApp #jobWorkspace .repair-step-list{display:grid;gap:10px;margin-top:18px}
#mechanicApp #jobWorkspace .repair-task{background:#fff;border:1px solid #e1e7f0;border-left:3px solid #d0dbee;border-radius:12px;padding:17px;box-shadow:none}
#mechanicApp #jobWorkspace .repair-task.is-open{border-color:#b4c6f6;border-left-color:#315bea;background:#f9fbff}
#mechanicApp #jobWorkspace .repair-task.done{background:#f4faf6;border-left-color:#449771}
#mechanicApp #jobWorkspace .repair-task-title{font:600 16px/1.45 Inter,sans-serif;color:#213b5c}
#mechanicApp #jobWorkspace .repair-task-copy>small{font:600 10px/1.5 Inter,sans-serif;letter-spacing:.06em;color:#6b80a0}
#mechanicApp #jobWorkspace .repair-task-detail{max-width:88ch;line-height:1.7;color:#425976}
#mechanicApp #jobWorkspace .repair-task-detail p{line-height:1.7}
#mechanicApp #jobWorkspace .step-entry{background:#f2f6fc;border-color:#dce5f2;border-radius:10px}
@media(max-width:760px){
 #mechanicApp #jobWorkspace .workspace-head{padding:18px}
 #mechanicApp #jobWorkspace .workspace-actions{max-width:none}
 #mechanicApp #jobWorkspace .job-section-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;overflow:visible}
 #mechanicApp #jobWorkspace .job-section-nav :is(a,button){padding:8px 3px;font-size:11px;white-space:normal;margin:0}
 #mechanicApp #jobWorkspace .job-context>summary span{display:block;margin:4px 0 0;font-size:11px}
 #mechanicApp #jobWorkspace .job-stats article{padding:12px}
 #mechanicApp #jobWorkspace .js-value{font-size:22px}
 #mechanicApp #jobWorkspace .repair-task{padding:13px;gap:9px}
 #mechanicApp #jobWorkspace .repair-task-title{font-size:15px}
}
@media(max-width:760px){
 #mechanicApp #jobWorkspace .job-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
 #mechanicApp #jobWorkspace .job-stats article{padding:11px 8px;min-width:0}
 #mechanicApp #jobWorkspace .js-label{font-size:9px;line-height:1.4;min-height:26px}
 #mechanicApp #jobWorkspace .js-value{font-size:clamp(12px,3.6vw,17px);letter-spacing:-.04em;white-space:nowrap}
 #mechanicApp #jobWorkspace .js-foot,#mechanicApp #jobWorkspace .js-bar{display:none}
}
/* Customer setup shows the connection and sharing state together. */
#mechanicApp .customer-hub{margin-top:32px}
#mechanicApp .customer-hub-head{display:flex;justify-content:space-between;gap:16px;align-items:center}
#mechanicApp .customer-hub h3{font-size:28px;margin:8px 0}
#mechanicApp .customer-hub-head p{color:#61728a;line-height:1.6}
.customer-count{font-size:12px;color:#526985;white-space:nowrap}
.customer-search{display:grid;gap:8px;margin:20px 0;font-size:12px;font-weight:600;color:#526985}
.customer-search input{width:100%;padding:13px 16px;border:1px solid #ccd8e8;border-radius:10px;background:white;font:inherit;font-size:16px}
.customer-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
#mechanicApp .customer-card{display:block;margin:0;padding:22px;border:1px solid #dce5f0;border-radius:16px;background:#fff;min-width:0}
.customer-card-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.customer-avatar{width:40px;height:40px;display:grid;place-items:center;background:#eaf0ff;color:#315bea;border-radius:12px;font-weight:700}
.customer-card .tm-name{flex:1;min-width:0}.customer-card .tm-name :is(b,em){overflow-wrap:anywhere}
.customer-state{padding:6px 9px;border-radius:7px;background:#edf2fa;color:#47648e;font-size:11px;font-weight:650}
.customer-state.is-connect,.customer-state.is-share{background:#fff2d9;color:#895a10}.customer-state.is-ready{background:#e6f5ed;color:#20754d}
#mechanicApp .customer-next{margin:18px 0;font-size:13px;line-height:1.6;color:#5c708c}
.customer-card h4{display:flex;gap:12px;justify-content:space-between;font-size:12px;color:#304b6b;margin:18px 0 10px}.customer-card h4 span{font-weight:400;color:#6c7e96}
.customer-vehicles>p,.customer-hint{font-size:12px;color:#74859a;line-height:1.5}
.customer-vehicle{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:48px;padding:12px;border:1px solid #e1e8f2;border-radius:9px;background:#f6f9fd;color:#253f60;text-align:left;margin:8px 0;cursor:pointer}.customer-vehicle small{font-size:10px;color:#315bea;white-space:nowrap}
.customer-share{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #e8edf4}.customer-share input{width:20px;height:20px;flex:none;accent-color:#315bea}.customer-share>span{flex:1;min-width:0}.customer-share strong{display:block;font-size:13px;line-height:1.4}.customer-share small{display:block;font-size:11px;color:#6b7d94;line-height:1.5;margin-top:5px}.customer-share>b{font-size:10px;color:#687e99}
.customer-connect,.customer-account{border-top:1px solid #e4ebf4;margin-top:18px;padding-top:12px}.customer-card summary{font-size:12px;font-weight:600;color:#365a88;cursor:pointer;min-height:36px;line-height:36px}
.customer-connect form{display:grid;gap:10px}.customer-connect label{display:grid;gap:7px;font-size:12px;color:#637791}.customer-connect select{width:100%;min-width:0;padding:11px;border:1px solid #cad7e8;border-radius:8px;background:#fff;font-size:14px}.customer-account p{font-size:12px;color:#76869c;line-height:1.6}.customer-account summary{color:#7b899d;font-weight:400}
.customer-empty{padding:20px;color:#6c7e96;font-size:14px}
@media(max-width:850px){.customer-list{grid-template-columns:1fr}#mechanicApp .customer-card{padding:18px}.customer-state{margin-left:auto}.customer-share{flex-wrap:wrap}.customer-card-head .tm-name{flex-basis:calc(100% - 60px)}}
/* Compact customer directory; only the selected customer's controls expand. */
#mechanicApp .customer-list{display:block;border:1px solid #dce5ef;border-radius:12px;overflow:hidden;background:white}
#mechanicApp .customer-list:empty{display:none}
#mechanicApp .customer-card{padding:0;border:0;border-bottom:1px solid #e5ebf3;border-radius:0;background:#fff}
#mechanicApp .customer-card:last-child{border-bottom:0}
#mechanicApp .customer-card>.customer-card-head{display:grid;grid-template-columns:32px minmax(150px,1.2fr) minmax(150px,1fr) auto 16px;align-items:center;gap:14px;padding:13px 16px;min-height:70px;line-height:1.4;list-style:none;margin:0;cursor:pointer}
#mechanicApp .customer-card>.customer-card-head::-webkit-details-marker{display:none}
#mechanicApp .customer-card>.customer-card-head:hover,#mechanicApp .customer-card[open]>.customer-card-head{background:#f3f7fd}
#mechanicApp .customer-avatar{width:32px;height:32px;font-size:12px;border-radius:9px}
#mechanicApp .customer-card-head .tm-name b{font:600 13px/1.4 Inter,sans-serif}
#mechanicApp .customer-card-head .tm-name em{font:400 11px/1.4 Inter,sans-serif;color:#75869c;margin-top:3px}
.customer-row-vehicle{font:400 12px/1.5 Inter,sans-serif;color:#526b8b;min-width:0;overflow-wrap:anywhere}
#mechanicApp .customer-state{font-size:10px;margin:0;padding:5px 7px;white-space:nowrap}
.customer-expand{font-size:18px;color:#7488a4;transition:transform .15s}
.customer-card[open] .customer-expand{transform:rotate(180deg)}
.customer-expanded{padding:0 20px 20px;border-top:1px solid #e4ebf5;max-width:850px}
.customer-pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;color:#6b7e97;font-size:12px}
.customer-pagination>div{display:flex;gap:8px}.customer-pagination .btn{font-size:12px;padding:8px 14px}
.customer-pagination button:disabled{opacity:.4;cursor:default}
@media(max-width:760px){
 #mechanicApp .customer-card>.customer-card-head{grid-template-columns:28px minmax(0,1fr) auto 12px;gap:6px 9px;padding:12px;min-height:80px}
 #mechanicApp .customer-avatar{width:28px;height:28px;grid-column:1;grid-row:1/3}
 #mechanicApp .customer-card-head .tm-name{grid-column:2;grid-row:1;min-width:0}
 #mechanicApp .customer-card-head .customer-row-vehicle{grid-column:2/4;grid-row:2;font-size:11px}
 #mechanicApp .customer-card-head .customer-state{grid-column:3;grid-row:1;font-size:9px;white-space:normal;max-width:90px}
 #mechanicApp .customer-expand{grid-column:4;grid-row:1/3}
 .customer-expanded{padding:0 14px 16px}
 .customer-pagination{font-size:11px}.customer-pagination .btn{padding:8px 10px}
}

/* A frosted loading layer over a decorative, data-free workspace outline. */
.tf-booting{isolation:isolate;overflow:hidden;background:rgba(236,241,249,.48);color:#203149;padding:calc(24px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px));text-align:center;font:400 14px/1.6 var(--sans,Arial,sans-serif);letter-spacing:0;text-transform:none;gap:0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tf-boot-backdrop{position:absolute;inset:-12px;z-index:-1;display:grid;grid-template-columns:190px 1fr;gap:36px;padding:38px;background:radial-gradient(ellipse at 72% 26%,#dfe8ff,transparent 65%),#f0f3f8;filter:blur(7px);pointer-events:none}
.tf-boot-sidebar{border-right:1px solid #d6deeb;padding:12px 32px 0 0}
.tf-boot-sidebar i{display:block;height:13px;border-radius:8px;background:#d9e1ef;margin-bottom:34px}
.tf-boot-sidebar i:first-child{width:48px;height:48px;background:#c5d3ef;border-radius:16px;margin-bottom:58px}
.tf-boot-workspace{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:52px 180px 220px;gap:26px;padding-top:12px}
.tf-boot-toolbar{grid-column:1/-1;width:32%;height:20px;border-radius:9px;background:#d4deed}
.tf-boot-placeholder{border:1px solid rgba(210,220,236,.65);border-radius:22px;background:rgba(255,255,255,.55)}
.tf-boot-placeholder:last-child{grid-column:1/-1}
.tf-boot-glass{width:min(380px,calc(100vw - 40px));box-sizing:border-box;display:grid;justify-items:center;gap:10px;padding:32px 24px;border:1px solid rgba(255,255,255,.95);border-radius:26px;background:rgba(255,255,255,.68);box-shadow:0 24px 80px rgba(49,70,109,.12),inset 0 1px 0 #fff;backdrop-filter:blur(26px) saturate(145%);-webkit-backdrop-filter:blur(26px) saturate(145%)}
.tf-booting-mark{position:relative;width:48px;height:48px;margin-bottom:6px;background:rgba(231,237,255,.8);color:#3159df}
.tf-booting-mark:after{content:"";position:absolute;inset:-5px;border:2px solid rgba(49,89,223,.1);border-top-color:#6c89ec;border-radius:50%;animation:tf-boot-turn 1.4s linear infinite}
.tf-booting strong{font-size:20px;line-height:1.35;letter-spacing:-.025em}
.tf-booting p{margin:0;color:#62738b;font-size:13px}
@keyframes tf-boot-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.tf-booting-mark:after{animation:none}}
@media(max-width:600px){.tf-boot-backdrop{grid-template-columns:1fr;padding:32px 24px;gap:22px}.tf-boot-sidebar{display:none}.tf-boot-workspace{grid-template-rows:48px 160px 210px;gap:16px}.tf-boot-glass{padding:28px 22px;border-radius:24px}}
#workshopHome{text-decoration:none;color:inherit}
#workshopHome:focus-visible,#clientHome:focus-visible{outline:3px solid #3159df;outline-offset:5px;border-radius:8px}

#teamBody>.customer-hub{margin-top:0}
.people-staff-heading{margin:32px 0 16px;font-size:20px}

.staff-access-list{display:grid;gap:14px}
.staff-access-card{padding:20px;background:#fff;border:1px solid #dce5f2;border-radius:16px;min-width:0}
.staff-access-card>header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.access-badge{border-radius:8px;padding:5px 10px;background:#edf2ff;color:#3159df;font-size:12px;font-weight:700}
.access-picker{display:grid;gap:12px;min-width:0}
.access-picker>label{display:grid;gap:6px;font-size:13px;font-weight:600}
#mechanicApp .access-picker select{width:100%;max-width:360px;padding:12px;border:1px solid #ccd7e6;border-radius:10px;background:#fff;color:#203149;font:inherit;min-height:44px}
.access-description{margin:0;color:#63748b;font-size:13px;line-height:1.6}
.access-areas{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0;min-width:0}
.access-areas legend{font-size:12px;color:#63748b;margin-bottom:8px}
.access-areas label{display:flex;align-items:center;gap:8px;border:1px solid #dce5f2;border-radius:9px;padding:10px 12px;min-height:44px;font-size:13px;cursor:pointer;background:#f8faff}
.access-areas label:has(input:checked){background:#edf2ff;border-color:#b8c9fb;color:#244ac2}
.access-areas input{margin:0;accent-color:#3159df;width:16px;height:16px}
.access-save{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:16px}
.customer-account form>.btn{margin-top:16px}
#mechanicApp .tm-invite>.access-picker{grid-column:1/-1}
@media(max-width:600px){.staff-access-card{padding:16px}.staff-access-card .tm-name{min-width:0;overflow-wrap:anywhere}.access-areas{display:grid;grid-template-columns:1fr 1fr}.access-areas label{padding:10px 8px}.access-badge{flex-shrink:0}}

.access-customize>summary{padding:8px 0;font-size:13px;font-weight:600;cursor:pointer;color:#3159df}
.access-customize[open]>.access-areas{margin-top:8px}