#topFunnelSwitch[hidden]{display:none!important}
#orderDialog{overflow:hidden!important;border-radius:20px!important}
#orderDialog>#orderForm,#orderDialog>#commentsPanel{border-radius:0!important}
#orderStageStrip{margin:0 0 12px;min-width:0}
.orderStageSteps{display:flex;flex-wrap:nowrap;gap:1px;justify-content:flex-start;width:100%;min-width:0}
.orderStageSteps button{flex:1 1 0;min-width:0;overflow:hidden;border:0;border-bottom:2px solid var(--step-color);background:#e4e9e7;color:#425650;border-radius:0;padding:4px 11px;font-size:11px;line-height:16px;height:28px;cursor:pointer;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%,7px 50%)}
.orderStageSteps button:first-child{clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%);padding-left:6px}
.orderStageSteps button span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orderStageSteps button:focus-visible{filter:brightness(.9)}
.orderStageSteps button:disabled{opacity:.55;cursor:default}
.orderFailureReason{margin-top:8px;padding:8px 10px;border-left:3px solid #c44747;background:#fff1f1;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}
.orderFailureReason[hidden],.stageFinishChoices[hidden]{display:none!important}
dialog.stageFinishDialog{position:fixed!important;inset:0!important;margin:auto!important;width:min(480px,calc(100vw - 32px))!important;max-width:calc(100vw - 32px)!important;height:fit-content!important;min-height:0!important;max-height:calc(100dvh - 32px)!important;padding:20px!important;border:1px solid #d3dfda!important;border-radius:16px!important;background:#fff!important;color:#1d2428;overflow:auto!important;box-sizing:border-box;box-shadow:0 15px 50px #183c3533!important}
dialog.stageFinishDialog[open]{display:block!important}
dialog.stageFinishDialog>form{width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;overflow:visible!important;box-shadow:none!important}
.stageFinishDialog::backdrop{background:#16332c33}
.stageFinishDialog h3{margin:0 0 18px;font-size:16px;line-height:1.4}
.stageFinishChoices{display:flex;gap:8px;flex-wrap:wrap}
.stageFinishDialog form{display:flex;gap:10px;flex-wrap:wrap}
.stageFinishDialog label{display:grid;gap:5px;width:100%;font-size:13px}
.stageFinishDialog textarea{min-height:90px;resize:vertical}
.stageFinishDialog select{height:32px;min-height:32px;padding:3px 9px}
.stageFinishDialog [role=alert]:empty{display:none}
.stageFinishDialog [role=alert]{width:100%;color:#af3030}
#orderStageStrip small{display:block;font-size:11px;color:#778b82;margin-top:5px}
@layer compact-actions{
  button:is(.payrollSectionTab,.pricingSectionTab,.mailFolderBtn),.pricingTabs>button{height:32px!important;min-height:32px!important;padding:0 10px!important;font-size:13px!important;border-radius:8px!important}
  #attendanceScreen input:not([type=checkbox]),#payrollScreen input:not([type=checkbox]),#checkoScreen input:not([type=checkbox]),.dealHero input,.dealHero select{height:32px!important;min-height:32px!important;padding:4px 10px!important;font-size:13px!important;line-height:22px!important;box-sizing:border-box!important}
}
.dealHero h3{margin:0 0 6px!important;line-height:32px!important}
.dealHero input[data-deal-field=title]{font-weight:600!important}
#mailRoot .mailMessageTop{flex-wrap:wrap;gap:4px}
#mailRoot .mailMessageTop strong{flex:1 1 180px;min-width:0}
@media(min-width:761px){
  #mailRoot .mailLayout{height:var(--mail-available-height,calc(100dvh - 150px));grid-template-rows:auto minmax(0,1fr)}
  #mailRoot .mailInbox,#mailRoot .mailReader{height:100%;min-height:0;min-width:0}
  #mailRoot .mailInbox{display:flex;flex-direction:column}
  #mailRoot .mailInbox .mailMessages{height:auto;min-height:0;max-height:none;flex:1}
  #mailRoot .mailInboxHead,#mailRoot .mailFolders,#mailRoot .mailReaderHead{flex-shrink:0}
}
#mailRoot #mailComposeBody,#mailRoot #mailComposeBody:hover{background-color:#edf3f0!important;transition:background-color .15s ease}
#mailRoot #mailComposeBody:focus,#mailRoot #mailComposeBody:focus:hover{background-color:#fff!important;box-shadow:none!important}
#mailRoot .mailRichBox:focus-within{border-color:#318b7c;box-shadow:0 0 0 2px rgba(49,139,124,.12)}
#mailRoot .mailLayout{grid-template-columns:clamp(240px,var(--mail-list-width,480px),55%) 6px minmax(0,1fr);column-gap:4px;row-gap:8px}
#mailSplitHandle{cursor:col-resize;touch-action:none;border-radius:6px;background:transparent;position:relative}
#mailSplitHandle:before{content:'';position:absolute;top:35%;bottom:35%;left:1px;width:4px;border-radius:4px;background:#c0d1ca}
#mailSplitHandle:hover,#mailSplitHandle:focus-visible{background:#b5d7ce;outline:none}
#mailRoot .mailToolbar{padding:8px 12px}
#mailRoot .mailHead h3{font-size:15px;margin:0}
#mailRoot .mailHead p{font-size:12px;margin:3px 0 0}
#mailRoot .mailReaderHead{padding:10px 12px;gap:10px}
#mailRoot .mailReaderHead h3{font-size:16px}
#mailRoot .mailReaderHead p{font-size:12px;margin:3px 0 0;overflow-wrap:anywhere}
#mailRoot .mailBody{padding:12px}
#mailRoot .mailCompose{padding:10px 12px;gap:8px}
#mailRoot .mailRetry{align-self:flex-start;margin:12px}
#mailRoot .mailLinkForm{display:flex;align-items:end;flex-wrap:wrap;gap:6px;padding:8px;background:#f4f8f6;border-bottom:1px solid #dce7e2}
#mailRoot .mailLinkForm label{flex:1;min-width:180px;font-size:12px}
#mailRoot .mailLinkForm input{height:32px;min-height:32px;padding:4px 8px}
#mailRoot .mailLinkForm [role=status]{flex-basis:100%;font-size:12px;color:#a63d3d}
#mailRoot .mailLinkForm [role=status]:empty{display:none}
@media(max-width:760px){#mailRoot .mailLayout{grid-template-columns:minmax(0,1fr)}#mailSplitHandle{display:none}}
#mailRoot .mailRichBox{border:1px solid #c7d8d2;border-radius:10px;overflow:hidden;background:#fff}
#mailRoot .mailRichToolbar{display:flex;flex-wrap:wrap;gap:4px;padding:6px 8px;background:#f4f8f6;border-bottom:1px solid #dce7e2}
#mailRoot .mailRichToolbar button{height:28px;min-height:28px;padding:0 8px;border-radius:6px;background:transparent;color:#36544d;font-size:12px}
#mailRoot .mailRichToolbar button:hover,#mailRoot .mailRichToolbar button:focus-visible{background:#e0efea;outline:1px solid #8cbcaf}
#mailRoot #mailComposeBody{min-height:100px;max-height:300px;overflow:auto;padding:10px 12px;font-size:14px;line-height:1.5;outline:none;white-space:pre-wrap}
#mailRoot #mailComposeBody:empty:before{content:attr(data-placeholder);color:#84968f;pointer-events:none}
#mailRoot #mailComposeBody a{color:#146eb4;text-decoration:underline}
#mailRoot .mailFilesBar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#mailRoot .mailFilesBar>span{font-size:12px;color:#7a8e87}
#mailRoot #mailAttachBtn{display:inline-flex;align-items:center;gap:7px;background:transparent}
#mailRoot #mailComposeFiles[hidden]{display:none!important}
#mailRoot .mailComposeAttachmentList{display:flex;flex-wrap:wrap;gap:7px}
#mailRoot .mailComposeAttachmentList:empty{display:none}
#mailRoot .mailFileChip{display:flex;align-items:center;gap:12px;padding:7px 9px;border:1px solid #d7e4de;border-radius:8px;background:#f6faf8;max-width:100%}
#mailRoot .mailFileChip>span{display:grid;gap:2px;min-width:0}
#mailRoot .mailFileChip b{font-size:12px;overflow-wrap:anywhere}
#mailRoot .mailFileChip small{font-size:11px;color:#7a8e87}
#mailRoot .mailFileChip button{flex:0 0 24px;width:24px;height:24px;padding:0;border-radius:6px;background:transparent;color:#a84747;display:grid;place-items:center;font-size:18px}
button.stageAction::before,button.stageAction::after{content:none!important;display:none!important}
#calculationDialog #calculationStatus{height:32px!important;min-height:32px!important;padding:3px 8px!important;font-size:13px;line-height:18px}
#calculationDialog label:has(>#calculationStatus){width:190px;max-width:100%;gap:3px!important;font-size:11px;line-height:14px}
#calculationDialog{overflow:hidden!important;border-radius:20px!important}
#calculationDialog>.calculationForm,#calculationDialog>.calculationReplyPanel{border-radius:0!important}
#calculationDialog #calculationReplyPanel header h4{font-size:14px;line-height:1.3;margin:0}
#board,#tasksBoard,#calculationsBoard{scroll-behavior:auto!important}
#ordersScreen.blankRegisterSection .viewModeToggle,#ordersScreen.blankRegisterSection #topFunnelSwitch,#ordersScreen.blankRegisterSection #orderFinanceSummary{display:none!important}
body .bulkBar{min-height:0!important;padding:8px 12px!important;gap:10px!important;align-items:center!important;border-radius:10px!important}
body .bulkBar .actions{margin:0!important;padding:0!important;gap:8px!important;align-items:center!important}
body .bulkBar strong{margin:0!important;line-height:18px;font-size:13px}
[data-order-view="blanks"][hidden]{display:none!important}
@layer compact-actions {
  button.stageAction,button.stageAddLead{background:transparent!important;background-image:none!important;color:#176f64!important;border:1px solid rgba(92,151,140,.38)!important;box-shadow:none!important;opacity:1!important;gap:5px!important}
  button.stageAction:hover,button.stageAddLead:hover{background:rgba(23,111,100,.07)!important;border-color:#438f83!important}
  #ordersScreen .toolbar>.listAddAction{display:inline-flex!important;align-items:center;justify-content:center;order:0!important;flex:0 0 auto;width:auto!important;margin:0!important;height:32px;min-height:32px;padding:0 10px;font-size:13px;border-radius:8px}
  #tasksScreen .taskToolbar>.stageAction{margin:0!important;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
}
.top .topActions{margin-left:auto}
#board .column>#addLeadBtn.stageAddLead{gap:6px;font-size:13px!important}
#board .column>#quickAddBtn,#tasksBoard .stageTaskActions>button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;color:#176f64;background:rgba(255,255,255,.22);border:1px solid rgba(92,151,140,.32);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);font-weight:600}
#board .column>#quickAddBtn{width:calc(100% - 16px);flex:0 0 32px;margin:7px 8px 0}
#tasksBoard .stageTaskActions{display:flex;gap:5px;margin:7px 8px 0;flex:0 0 auto}
#tasksBoard .stageTaskActions>button{flex:1 1 auto;white-space:nowrap}
#board .column>#quickAddBtn:hover,#tasksBoard .stageTaskActions>button:hover{background:rgba(255,255,255,.55);border-color:#438f83}
/* One compact stage header for every kanban, without changing column height. */
#board .columnHead,#tasksBoard .taskColumnHead,#calculationsBoard .calculationColumnHead{display:flex!important;align-items:center!important;gap:8px!important;height:38px!important;min-height:38px!important;max-height:38px!important;flex:0 0 38px!important;padding:4px 10px!important;box-sizing:border-box;font-size:12px!important;line-height:14px!important}
#board .columnHead h3,#tasksBoard .taskColumnHead>span:first-child,#calculationsBoard .calculationColumnHead>span:first-child{margin:0!important;min-width:0;flex:1;font-size:12px!important;line-height:14px!important;max-height:28px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#board .columnHead .count,#tasksBoard .taskColumnHead .count,#calculationsBoard .calculationColumnHead .count{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:20px;min-height:20px!important;height:20px!important;padding:0 5px!important;font-size:11px!important;line-height:18px!important;box-sizing:border-box}
#board .columnHeadActions,#calculationsBoard .columnHeadActions{gap:6px!important;align-items:center}
/* Shared action-button sizing. Layered important rules also override legacy
   module-specific important declarations without changing visibility or layout. */
@layer compact-actions {
  :root{--action-height:32px;--action-font:13px;--action-radius:8px}
  button:is(.primary,.secondary,.danger,.upload,.smallBtn,.dangerMini,.dangerGhost,.downloadBtn,.cardDownloadBtn,.commentBtn,.commentOpenBtn,.filterClear,.calendarOpenSectionBtn,.calendarTitleBtn,.leadActivitySubmit,.logoutBtn,.attachmentAddBtn,.dealSaveSnapshotBtn,.dealAddPaymentBtn):not(.stageAddLead){
    min-height:var(--action-height)!important;height:var(--action-height)!important;
    padding:0 10px!important;font-size:var(--action-font)!important;line-height:18px!important;
    border-radius:var(--action-radius)!important;box-sizing:border-box!important;
    align-items:center!important;justify-content:center!important;
  }
  button:is(.iconBtn,.notifyBtn.iconOnly,.monthBtn,.taskDuePickerBtn){
    width:var(--action-height)!important;min-width:var(--action-height)!important;
    height:var(--action-height)!important;min-height:var(--action-height)!important;
    padding:0!important;border-radius:var(--action-radius)!important;box-sizing:border-box!important;
    align-items:center!important;justify-content:center!important;
  }
}
.main>.top{margin-bottom:6px!important;padding-bottom:6px!important;min-height:0!important}
/* Compact actions, including popovers and the selected calendar day. */
.top .topActions #quickAddBtn,#smartSearchPanel button,#ordersScreen .orderToolsSettings #dataExchangeActions button,#calendarScreen :is(.primary,.secondary,.danger,.calendarTitleBtn,.monthBtn){min-height:32px!important;height:32px!important;padding:0 10px!important;font-size:13px!important;line-height:18px!important;border-radius:8px!important;box-shadow:none;display:inline-flex;align-items:center;justify-content:center}
.top .topActions #notificationsBtn{width:32px!important;height:32px!important;min-height:32px!important;padding:0!important;font-size:17px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px}
#ordersScreen #smartSearchPanel{padding:10px;min-width:0;max-width:calc(100vw - 32px)}
#ordersScreen #smartSearchPanel .searchFilters{gap:8px}
#ordersScreen #smartSearchPanel select{min-height:32px!important;height:32px;padding:3px 8px;font-size:13px}
#ordersScreen #smartSearchPanel .smartSearchActions{padding-top:8px;margin-top:8px;gap:8px}
#ordersScreen .orderToolsSettings #dataExchangeActions{padding:6px;gap:2px}
#ordersScreen .orderToolsSettings #dataExchangeActions button{justify-content:flex-start}
#ordersScreen .toolbar>#addLeadBtn{display:none!important}
#board .column>#addLeadBtn.stageAddLead{display:flex!important;flex:0 0 30px;align-items:center;justify-content:center;width:calc(100% - 16px);height:30px;min-height:30px;margin:7px 8px 0;padding:0;color:#176f64;background:rgba(255,255,255,.22);border:1px solid rgba(92,151,140,.32);border-radius:8px;backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
#board .column>#addLeadBtn:hover{background:rgba(255,255,255,.55);border-color:#438f83}
#board .column>#addLeadBtn:focus-visible{outline:2px solid #318b7c;outline-offset:2px}
#calendarScreen .calendarEditor,#calendarScreen .calendarDuePanel{padding:10px!important;gap:7px!important;margin-top:0!important;align-self:start}
#calendarScreen :is(.calendarEditor,.calendarDuePanel) h3{font-size:16px!important;line-height:1.2;margin:0 0 7px}
#calendarScreen .calendarDayBlock{padding:8px!important;gap:7px!important}
#calendarScreen .calendarDayBlock h4{font-size:13px!important;margin:0!important}
#calendarScreen :is(.calendarDueItem,.dayOrder,.dayNote){padding:8px!important;margin:0!important;gap:5px;font-size:13px}
#calendarScreen :is(.calendarDueItem,.dayOrder,.dayNote) p{font-size:12px;margin-top:3px!important;line-height:1.3}
#calendarScreen :is(.calendarDueList,.dayNotesList){gap:6px!important}
#calendarScreen .calendarSummaryGrid{gap:5px}
#calendarScreen .calendarSummaryGrid span{padding:6px;gap:2px}
#calendarScreen .calendarSummaryGrid b{font-size:16px}
#calendarScreen .calendarEditor textarea#calendarNoteText{min-height:38px!important;height:38px!important;padding:6px 8px!important;font-size:13px;max-height:none!important}
#calendarScreen .calendarNoteFlag{min-height:30px!important;padding:4px 7px!important;font-size:12px}
@media(min-width:1200px){
  #calendarScreen:not(.hidden){display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.34fr) minmax(240px,.38fr);grid-template-rows:auto 1fr;gap:10px 14px;align-items:start}
  #calendarScreen .calendarLayout{display:contents!important}
  #calendarScreen .calendarTop{grid-column:1;grid-row:1;margin:0}
  #calendarScreen #calendarGrid{grid-column:1;grid-row:2;min-width:0}
  #calendarScreen .calendarDuePanel{grid-column:2;grid-row:1/3;max-height:calc(100vh - 130px);overflow-y:auto}
  #calendarScreen .calendarEditor{grid-column:3;grid-row:1/3}
}
/* Match toolbar heights, with room for seven-digit currency totals. */
#ordersScreen .toolbar>#smartSearchShell{height:38px!important;min-height:38px!important;padding:4px 7px!important;flex-wrap:nowrap!important}
#ordersScreen .toolbar>#smartSearchShell #searchInput{height:28px!important;min-height:28px!important;line-height:20px!important;margin:0!important}
#ordersScreen .toolbar #smartSearchChips{min-width:0;flex:0 1 auto;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap!important}
#ordersScreen .toolbar #smartSearchChips::-webkit-scrollbar{display:none}
#ordersScreen .toolbar #smartSearchChips>button{height:26px!important;min-height:26px!important;padding:0 7px 0 9px!important;line-height:18px!important;gap:6px;flex-shrink:0;border-radius:7px}
#ordersScreen .toolbar #smartSearchChips>button>b{width:18px;height:18px;flex:0 0 18px}
#ordersScreen .toolbar>#topFunnelSwitch #funnelSelect{height:38px!important;min-height:38px!important}
#ordersScreen .toolbar>.viewModeToggle{height:38px;box-sizing:border-box;align-items:center}
#ordersScreen .toolbar .orderToolsSettings{flex-basis:38px}
#ordersScreen .toolbar .orderToolsSettings>summary{width:38px;height:38px;min-height:38px;border-radius:8px}
#ordersScreen .toolbar #orderFinanceSummary .financeMetric{width:164px;min-width:164px;max-width:164px;flex:0 0 164px!important;height:38px;min-height:38px;padding:3px 8px}
#ordersScreen .toolbar #orderFinanceSummary .financeMetric b{white-space:nowrap;font-variant-numeric:tabular-nums}
/* Draw the cross geometrically, independent of the font's x/× baseline. */
button.iconBtn[id^="close"],.successfulOutcomeFilter>b,.appliedFilterChip>b{position:relative;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important;font-size:0!important;line-height:0!important}
button.iconBtn[id^="close"]::after,.successfulOutcomeFilter>b::after,.appliedFilterChip>b::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:currentColor;pointer-events:none;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 4 8 8m0-8-8 8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
/* Compact order-comment list and composer, without shrinking message readability. */
#chatScreen .chatShell{grid-template-columns:clamp(240px,var(--chat-list-w,320px),55%) 6px minmax(0,1fr)!important}
#chatScreen .chatListHead{padding:10px 12px}
#chatScreen .chatListHead h3{font-size:15px;margin-bottom:2px}
#chatScreen .chatListHead p{font-size:12px}
#chatScreen #chatConversationList{padding:7px;gap:6px}
#chatScreen #chatConversationList .chatItem{padding:8px 10px;gap:4px;border-radius:9px;min-height:0;box-shadow:none}
#chatScreen #chatConversationList .chatItem strong{font-size:13px;line-height:1.3}
#chatScreen #chatConversationList .chatText{font-size:12px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#chatScreen #chatConversationList .chatMeta{font-size:10px;line-height:1.3;gap:5px}
#chatScreen #orderCommentsPanel>.sectionTitle{padding:9px 12px;gap:8px}
#chatScreen #orderCommentsPanel>.sectionTitle h4{font-size:14px}
#chatScreen #orderCommentsPanel>.sectionTitle p{font-size:12px;margin-top:3px}
#chatScreen #orderCommentsPanel #openOrderFromChatBtn,#chatScreen #orderCommentsPanel #sendOrderCommentBtn{height:34px!important;min-height:34px!important;padding:0 11px!important;font-size:13px;line-height:18px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;box-shadow:none;align-self:end;width:auto!important}
#chatScreen #orderCommentThread{padding:12px 14px;gap:8px}
#chatScreen #orderCommentThread .chatBubble{padding:7px 10px;border-radius:12px;box-shadow:none}
#chatScreen #orderCommentThread .chatText{font-size:13px;line-height:1.4}
#chatScreen #orderCommentThread .chatMessageMeta{font-size:11px;gap:5px}
#chatScreen #orderCommentsPanel .chatComposer{grid-template-columns:minmax(120px,180px) minmax(0,1fr) auto!important;padding:8px 10px!important;gap:8px!important;align-items:end}
#chatScreen #orderCommentsPanel .chatComposer .commentTargetRow{grid-column:auto;gap:3px;font-size:11px}
#chatScreen #orderCommentsPanel #chatOrderCommentTarget{height:34px;min-height:34px!important;padding:4px 8px;border-radius:8px;font-size:13px}
#chatScreen #orderCommentsPanel #chatOrderCommentText{height:36px!important;min-height:36px!important;max-height:120px!important;box-sizing:border-box;padding:7px 9px;font-size:13px;line-height:20px;border-radius:8px;resize:vertical!important}
#chatScreen #orderCommentsPanel .chatComposer .commentTargetRow{grid-column:1!important;grid-row:1}
#chatScreen #orderCommentsPanel #chatOrderCommentText{grid-column:2!important;grid-row:1;width:100%;min-width:0}
#chatScreen #orderCommentsPanel #sendOrderCommentBtn{grid-column:3!important;grid-row:1;max-width:none!important;min-width:0;justify-self:end}
@media(max-width:760px){
  #chatScreen .chatShell{grid-template-columns:minmax(0,1fr)!important}
  #chatScreen #orderCommentsPanel .chatComposer{grid-template-columns:minmax(0,1fr) auto!important}
  #chatScreen #orderCommentsPanel .chatComposer .commentTargetRow{grid-column:1/-1!important;max-width:220px}
  #chatScreen #orderCommentsPanel #chatOrderCommentText{grid-column:1!important;grid-row:2}
  #chatScreen #orderCommentsPanel #sendOrderCommentBtn{grid-column:2!important;grid-row:2}
}
/* Compact controls and live financial totals share the order toolbar. */
#ordersScreen .toolbar>#topFunnelSwitch{order:1;flex:0 1 190px;width:190px;min-width:150px}
#ordersScreen .toolbar>#topFunnelSwitch #funnelSelect{width:100%!important;min-height:36px!important;height:36px;padding:5px 9px;font-size:13px;border-radius:8px}
#ordersScreen .toolbar>.viewModeToggle{order:0;padding:3px;border-radius:9px}
#ordersScreen .toolbar .viewModeBtn{min-height:30px!important;padding:5px 9px!important;font-size:13px;line-height:20px;border-radius:7px}
#ordersScreen .toolbar>#smartSearchShell,#ordersScreen .toolbar>#searchInput{order:2;flex:1 1 210px!important;min-width:180px;max-width:none;min-height:36px!important;box-sizing:border-box}
#ordersScreen .toolbar>#smartSearchShell{padding:3px 7px;gap:5px}
#ordersScreen .toolbar #searchInput{min-height:26px!important;padding:3px 4px!important;font-size:13px}
#ordersScreen .toolbar #smartSearchChips{gap:4px}
#ordersScreen .toolbar #orderFinanceSummary{order:3;flex:0 1 auto;margin:0!important;gap:6px;min-width:0}
#ordersScreen .toolbar #orderFinanceSummary:not(.hidden){display:flex;flex-wrap:wrap}
#ordersScreen #orderFinanceSummary .financeMetric{min-height:36px;padding:5px 8px;gap:6px;border-radius:8px;box-shadow:none;box-sizing:border-box}
#ordersScreen #orderFinanceSummary .financeMetric>span{width:20px;height:20px;flex:0 0 20px;font-size:12px;border-radius:6px}
#ordersScreen #orderFinanceSummary .financeMetric div{gap:1px}
#ordersScreen #orderFinanceSummary .financeMetric small{font-size:10px;line-height:12px}
#ordersScreen #orderFinanceSummary .financeMetric b{font-size:13px;line-height:16px;overflow:visible;text-overflow:clip}
#ordersScreen .toolbar>#addLeadBtn,#ordersScreen .toolbar>.orderToolsSettings{order:4}
@media(max-width:760px){
  #ordersScreen .toolbar>#topFunnelSwitch{flex:1 1 170px;max-width:100%;order:1}
  #ordersScreen .toolbar>#smartSearchShell{order:2;flex:1 1 100%!important;max-width:none}
  #ordersScreen .toolbar #orderFinanceSummary{flex:1 1 100%;order:3}
  #ordersScreen #orderFinanceSummary .financeMetric{flex:1 1 100px}
}
#topFunnelSwitch{min-width:0;flex:0 0 auto}
#topFunnelSwitch #funnelSelect{width:250px!important;min-width:0!important;max-width:100%!important;min-height:44px;margin:0;box-sizing:border-box}
.top .topActions{flex-wrap:wrap;gap:10px!important}
@media(min-width:761px){.top .topActions:has(#topFunnelSwitch:not([hidden])){flex:0 0 auto;flex-wrap:nowrap!important}#topFunnelSwitch{width:250px}}
#ordersScreen .toolbar{display:flex!important;flex-wrap:wrap;gap:10px;align-items:center}
#ordersScreen .toolbar>#smartSearchShell,#ordersScreen .toolbar>#searchInput{flex:1 1 260px;min-width:0;width:auto}
#ordersScreen .toolbar>.viewModeToggle{flex:0 0 auto}
#ordersScreen .orderToolsSettings{position:relative;flex:0 0 44px;margin-left:auto;z-index:25}
.orderToolsSettings>summary{display:flex;align-items:center;justify-content:center;list-style:none;width:44px;height:44px;padding:0;border:1px solid #cbdcd6;border-radius:12px;background:#fff;color:#176f64;cursor:pointer}
.orderToolsSettings>summary::-webkit-details-marker{display:none}
.orderToolsSettings>summary:hover,.orderToolsSettings[open]>summary{background:#e7f3ef;border-color:#438f83}
.orderToolsSettings>summary:focus-visible{outline:3px solid #72b9ae;outline-offset:2px}
#ordersScreen .orderToolsSettings:not([open])>#dataExchangeActions{display:none!important}
#ordersScreen .orderToolsSettings>#dataExchangeActions{position:absolute;right:0;top:calc(100% + 8px);display:grid;grid-template-columns:1fr;gap:5px;width:250px;max-width:calc(100vw - 32px);margin:0;padding:8px;border:1px solid #cbdcd6;border-radius:13px;background:#fff;box-shadow:0 12px 35px #173b3025}
#orderToolsSettings #dataExchangeActions>button,#orderToolsSettings #dataExportBtn{width:100%;text-align:left;border:0;background:transparent;border-radius:8px;min-height:42px}
#orderToolsSettings #dataExchangeActions button:hover{background:#e7f3ef}
#orderToolsSettings .dataExportDropdown{width:100%}
#orderToolsSettings #dataExportMenu{position:static;min-width:0;margin:3px 0 5px;padding:4px;background:#f3f8f6;border:0;box-shadow:none}
@media(max-width:760px){
  #topFunnelSwitch{flex:1 1 100%;width:100%;order:-1}
  #topFunnelSwitch #funnelSelect{width:100%!important}
  .top .topActions{min-width:0;max-width:100%}
  #ordersScreen .toolbar>.viewModeToggle{max-width:100%}
  #ordersScreen .toolbar>#smartSearchShell{flex:1 1 calc(100% - 60px);order:2}
  #ordersScreen .orderToolsSettings{order:3}
  #ordersScreen .toolbar>#addLeadBtn{order:1}
}

/* Bound invisible checkbox controls to the switch, never to the viewport. */
#companyScreen .accessToggle{position:relative;flex:0 0 36px}
#companyScreen .accessToggle input{
  position:absolute!important;inset:0!important;width:100%!important;min-width:0!important;max-width:100%!important;
  height:100%!important;min-height:0!important;max-height:100%!important;margin:0!important;padding:0!important;
  border:0!important;opacity:0;pointer-events:none;
}
#companyScreen .accessToggle input:focus-visible+span{outline:2px solid #318b7c;outline-offset:3px}

/* A single focus treatment covers each complete editable control. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):focus,
textarea:focus,select:focus,[contenteditable=true]:focus{
  outline:none!important;outline-offset:0!important;border-color:#318b7c!important;
  box-shadow:0 0 0 3px rgba(49,139,124,.14)!important;background-color:#f5fbf9!important;
}
#ordersScreen #smartSearchShell:focus-within{
  border-color:#318b7c!important;box-shadow:0 0 0 3px rgba(49,139,124,.14)!important;background:#f5fbf9!important;
}
#ordersScreen #smartSearchShell #searchInput,
#ordersScreen #smartSearchShell #searchInput:focus,
#ordersScreen #smartSearchShell #searchInput:focus-visible{
  outline:none!important;box-shadow:none!important;border:0!important;background:transparent!important;
}

#tasksScreen .taskToolbar{justify-content:flex-start!important;flex-wrap:wrap;gap:12px!important}
#tasksScreen .taskToolbar .taskViewToggle{margin-right:0!important}
#tasksScreen .taskToolbar .selectAllControl{margin:0!important;flex:0 0 auto}
#tasksScreen .taskToolbar #addSelfTaskBtn{margin-left:auto!important}
.taskStageSelect{display:flex!important;align-items:center;justify-content:center;flex:0 0 28px;min-height:24px;padding:3px;margin:0!important;border:0!important;line-height:1;cursor:pointer}
.taskStageSelect input{appearance:auto!important;width:18px!important;min-width:18px!important;height:18px!important;min-height:18px!important;margin:0!important;padding:0!important;box-shadow:none!important;cursor:pointer;accent-color:#126f61}
.taskColumnHead>.count{margin-left:auto;margin-right:6px}
.taskStageSelect:has(input:disabled){opacity:.45;cursor:default}

/* Keep calculation controls with the four columns instead of across the page. */
#calculationsScreen{width:100%;max-width:1180px;min-width:0;box-sizing:border-box}
#calculationsScreen .calculationToolbar{display:flex!important;flex-direction:column;align-items:stretch!important;justify-content:flex-start;gap:12px}
#calculationsScreen .calculationToolbarActions{display:flex!important;flex-direction:row;flex-wrap:wrap;align-items:center!important;justify-content:flex-start;gap:10px;min-width:0}
#calculationsScreen .calculationToolbarActions>*{margin:0;max-width:100%}
#calculationsScreen #calculationSearch{width:auto;min-width:180px;flex:1 1 240px}
#calculationsScreen .boardScrollFrame{min-width:0;max-width:100%}
#calculationsBoard:not(.calculationList){
  width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(235px,1fr);
  height:var(--calculation-board-height,600px);min-height:0;overflow:auto;align-items:stretch;
}
#calculationsBoard .calculationColumn{min-width:0;min-height:0;height:100%}
#calculationsBoard .calculationCards{min-height:0;overscroll-behavior:contain}
#calculationsBoard.calculationList{min-width:0;max-width:100%;min-height:0!important}
#calculationsBoard .calculationListRow{min-width:0;grid-template-columns:28px minmax(180px,1.4fr) repeat(5,minmax(0,1fr));overflow-wrap:anywhere}
@media(max-width:1100px){#calculationsBoard .calculationListRow{grid-template-columns:28px minmax(150px,1fr) repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  #calculationsScreen .calculationViewToggle{flex:1 1 100%;width:max-content}
  #calculationsScreen #calculationSearch{flex:1 1 100%;width:100%}
  #calculationsBoard:not(.calculationList){grid-auto-columns:min(82vw,320px)}
  #calculationsBoard .calculationListRow{grid-template-columns:28px minmax(0,1fr)}
}

/* Task cards grow from their content, then scroll at the viewport limit. */
#taskDialog[open]{
  display:flex!important;flex-direction:column!important;position:fixed!important;
  inset:16px auto auto 50%!important;transform:translateX(-50%);margin:0!important;
  height:auto!important;min-height:0!important;max-height:calc(100dvh - 32px)!important;
  overflow:hidden!important;
}
#taskDialog[open]>.noteDialogForm{
  height:auto!important;min-height:0!important;max-height:calc(100dvh - 32px)!important;
  flex:0 1 auto!important;overflow-y:auto!important;
}
#taskDialog[open]>.noteDialogForm>footer{margin:12px 0 0!important;flex-shrink:0!important}
#taskDialog[open]>.noteDialogForm>footer>div{display:flex;gap:8px;margin-left:auto}
@media(max-width:760px){
  #taskDialog[open]{inset:12px auto auto 50%!important;width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important;border-radius:16px!important}
  #taskDialog[open]>.noteDialogForm{max-height:calc(100dvh - 24px)!important}
}