/* Build 190: cleaner top header. The company logo hides itself when there is not enough room (see fitHeader in app.js). */
.deskbar>.deskrow{flex-wrap:nowrap;gap:12px;padding-bottom:2px}
.deskbar .deskidentity{flex:0 0 auto;min-width:0}
.deskbar .gsearch{flex:1 1 auto;min-width:0;max-width:560px}
.deskbar .gsearch input{width:100%;text-overflow:ellipsis}
.deskrow .deskwho{flex:0 0 auto;margin-left:auto;min-width:0;max-width:300px}
.deskrow .deskwho .whobrand{max-width:300px}
.deskrow .deskwho .whologimg{height:auto!important;max-height:52px!important;width:auto!important;max-width:280px!important;margin:0;object-position:center}
.deskbar.nologo .deskrow .deskwho{display:none}
.deskbar>.signcol{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px 14px;max-width:420px}
.deskbar>.signcol .toprow{flex:0 0 100%;justify-content:flex-end}
.deskbar>.signcol .whoblock{order:2;align-items:flex-end}
.deskbar>.signcol .op-create{order:3}
.deskbar>.signcol .whoblock .whoname{font-size:16px}
.deskbar>.signcol .whoblock small{font-size:13px}
.deskbar>.desktabs{gap:2px 4px}
@media(max-width:1000px){
 .deskbar{display:flex!important;flex-direction:column;align-items:stretch}
 .deskbar>.deskrow{order:1;flex-wrap:wrap}
 .deskbar .deskidentity{flex:1 1 auto}
 .deskbar .gsearch{flex:1 1 100%;max-width:none;order:5}
 .deskbar>.signcol{order:2;max-width:none;width:100%;flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:2px 16px 6px 20px}
 .deskbar>.signcol .toprow{flex:0 0 auto}
 .deskbar>.signcol .whoblock{margin-left:auto}
 .deskbar>.signcol .whoblock small{display:none}
 .deskbar>.desktabs{order:3;align-self:stretch;padding:0 12px 6px;justify-content:flex-start}
}
@media(max-width:700px){.deskbar>.signcol .feedbackbtn{display:none}}
@media(max-width:800px){.deskrow .deskwho,.deskrow .deskwho .whologimg{display:none!important}}
@media(max-width:560px){.deskbar>.signcol{padding:2px 12px 6px}.deskbar>.signcol .whoblock .whoname{font-size:15px}}

/* Build 311: phone menu. The top bar is one slim row (logo, name, + Create, Menu). Tapping Menu opens search, tabs, language and account. */
.mobtoggle{display:none}
@media(max-width:700px),(max-height:520px) and (max-width:1000px){
 .shell:not(.sidenav198) .deskbar .mobtoggle{display:inline-flex;align-items:center;margin-left:auto;min-height:40px;padding:0 14px;border:1px solid #dce5e0;border-radius:10px;background:#fff;color:#17231d;font-size:15px;font-weight:600}
 .shell:not(.sidenav198) .deskbar:not(.mnav-open)>.desktabs,
 .shell:not(.sidenav198) .deskbar:not(.mnav-open) .gsearch,
 .shell:not(.sidenav198) .deskbar:not(.mnav-open)>.signcol>.toprow,
 .shell:not(.sidenav198) .deskbar:not(.mnav-open)>.signcol .whoblock,
 .shell:not(.sidenav198) .deskbar:not(.mnav-open) .deskidentity small,
 .shell:not(.sidenav198) .deskbar:not(.mnav-open) .desklink{display:none!important}
 .shell:not(.sidenav198) .deskbar>.deskrow{flex-wrap:nowrap;align-items:center;gap:8px;padding:8px 12px}
 .shell:not(.sidenav198) .deskbar .deskbrand{font-size:20px}
 .shell:not(.sidenav198) .deskbar:not(.mnav-open)>.signcol{padding:0 12px 8px;justify-content:flex-start}
 .shell:not(.sidenav198) .deskbar.mnav-open>.desktabs{display:flex;flex-wrap:wrap;gap:2px 4px;max-height:60vh;overflow:auto}
 .shell:not(.sidenav198) .deskbar.mnav-open .gsearch{order:2;margin:0 12px 6px;flex:1 1 100%}
}
@media(max-width:700px),(max-height:520px) and (max-width:1000px){
 .shell:not(.sidenav198) .deskbar .deskidentity small{display:none!important}
 .shell:not(.sidenav198) .deskbar .deskbrand{white-space:nowrap}
 .shell:not(.sidenav198) .deskbar .deskidentity{flex:0 1 auto;min-width:0}
 .shell:not(.sidenav198) .deskbar.mnav-open>.deskrow{flex-wrap:wrap}
 .shell:not(.sidenav198) .deskbar.mnav-open>.deskrow .gsearch{flex:1 1 100%;order:9;max-width:none;margin:4px 0 0}
}

/* Build 311: every "+" button keeps all its content and is centred in its box (icon chip, + New estimate, + Create). */
.sx-ic{display:grid;place-items:center;line-height:0}
.sx-ic svg{display:block;margin:0;flex:none}
.sx-new,.sx-qa{display:inline-flex;align-items:center}
.sx-qa{display:flex}
.sx-new .sx-ic,.sx-qa .sx-ic{align-self:center;flex:none;margin:0}
.op-create details>summary{display:inline-flex;align-items:center;justify-content:center;gap:6px;list-style:none;text-align:center;line-height:1.2}
.op-create details>summary::-webkit-details-marker{display:none}
.op-create details>summary::marker{content:""}

/* Build 312: estimate item cards use less height. Product and Description sit side by side on wide screens. */
main:has(#estimate) .line-editor{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:4px 12px;padding:6px 12px;margin:6px 0;align-items:start}
main:has(#estimate) .line-editor>.linehead,main:has(#estimate) .line-editor>.linemini,main:has(#estimate) .line-editor>.linefoot{grid-column:1 / -1}
main:has(#estimate) .line-editor>.linehead{margin:0;min-height:0}
main:has(#estimate) .line-editor .linehead .linegrip{min-height:28px;padding:2px 10px;font-size:13px}
main:has(#estimate) .line-editor>label{font-size:13px;gap:2px;display:flex;flex-direction:column}
main:has(#estimate) .line-editor>label input,main:has(#estimate) .line-editor>label textarea{padding:6px 9px;font-size:15px}
main:has(#estimate) .line-editor textarea{min-height:36px;height:36px;resize:vertical}
main:has(#estimate) .line-editor .linemini{gap:6px}
main:has(#estimate) .line-editor .linemini label{font-size:12px;gap:1px}
main:has(#estimate) .line-editor .linefoot label{font-size:14px}
@media(max-width:900px){main:has(#estimate) .line-editor{grid-template-columns:1fr}}
main:has(#estimate) .line-editor .linefoot{flex-wrap:nowrap;align-items:center}
main:has(#estimate) .line-editor .linefoot .prediction{flex:1 1 0;min-width:0;font-size:13px;line-height:1.2}
main:has(#estimate) .line-editor .linefoot label,main:has(#estimate) .line-editor .linefoot button{flex:none}
@media(max-width:900px){main:has(#estimate) .line-editor .linefoot{flex-wrap:wrap}}

/* Build 312: the product search is easy to see, with a light green field, and offers to create what is not found. */
main:has(#estimate) #productSearch{background:#e3f4e8;border:2px solid #5aa77a;min-height:44px;font-size:16px;color:#173a2a}
main:has(#estimate) #productSearch::placeholder{color:#3f6b52}
main:has(#estimate) #productSearch:focus{background:#d6efdf;outline:2px solid #2f6b4f;outline-offset:1px}
#prodSuggest .suggcreate{background:#e3f4e8;border-top:1px solid #b7dcc4}
#prodSuggest .suggcreate b{color:#1d5a3b}
#prodSuggest .sugg.on{background:#d6efdf}

/* Build 363: phone menu. When the menu is open, a group's sub-menu (Operations > Dispatch calendar, Field jobs...) opens in the list itself
   instead of floating, so the scrolling menu can no longer cut it off and the page under it can no longer cover it. */
@media(max-width:700px){
 .shell:not(.sidenav198) .deskbar{z-index:60}
 .shell:not(.sidenav198) .deskbar.mnav-open>.desktabs{align-items:flex-start!important}
 .shell:not(.sidenav198) .deskbar.mnav-open .desktabs .tabgroup{display:block!important;position:static!important;flex:1 1 100%!important;width:100%!important}
 .shell:not(.sidenav198) .deskbar.mnav-open .desktabs .tabgroup>.tabpill.group{width:100%!important;text-align:left!important}
 .shell:not(.sidenav198) .deskbar.mnav-open .desktabs .tabmenu{position:static!important;left:auto!important;right:auto!important;top:auto!important;min-width:0!important;max-width:none!important;width:auto!important;margin:4px 0 8px 12px!important;box-shadow:none!important;transform:none!important;translate:none!important}
}