/* Shared page density. Presentation only: themes, data, permissions and editor behavior stay intact. */
.app-shell #main-content[data-page-route]{--page-title-size:24px;--page-body-size:13px}
.app-shell #main-content[data-page-route] .page-header{gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.app-shell #main-content[data-page-route] .page-header h1{font-size:var(--page-title-size);line-height:1.35;margin:0}
.app-shell #main-content[data-page-route] .header-actions{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.app-shell #main-content[data-page-route] .page-header .button{width:auto;min-width:36px;min-height:36px;padding:7px 10px;font-size:13px;white-space:nowrap;flex-shrink:0}
.app-shell #main-content[data-page-route] .section-heading{padding:12px 14px;gap:8px}
.app-shell #main-content[data-page-route] .section-heading h3{font-size:15px;line-height:1.5}
.app-shell #main-content[data-page-route] .content-section{margin-bottom:14px}
.app-shell #main-content[data-page-route] .section-tabs{gap:16px;margin-bottom:10px}
.app-shell #main-content[data-page-route] .section-tab{font-size:13px;min-height:36px;padding:7px 4px}
.app-shell #main-content[data-page-route] .toolbar-stack{margin-bottom:10px;box-shadow:none}
.app-shell #main-content[data-page-route] .list-toolbar{gap:8px;padding:8px 10px;margin:0;align-items:center}
.app-shell #main-content[data-page-route] .list-toolbar .search-field{min-width:0;max-width:none;flex:1 1 220px;height:36px;min-height:36px}
.app-shell #main-content[data-page-route] .list-toolbar .search-field input{height:34px;min-height:34px;font-size:13px}
.app-shell #main-content[data-page-route] .list-toolbar .filters{flex:0 1 auto;gap:6px;flex-wrap:wrap}
.app-shell #main-content[data-page-route] .list-toolbar select{min-height:36px;max-width:155px;padding:6px 8px;font-size:13px}
.app-shell #main-content[data-page-route] .list-toolbar>.button{min-height:36px;padding:6px 10px;font-size:13px}
.app-shell #main-content[data-page-route] .update-age-setting{min-height:36px}
.app-shell #main-content[data-page-route] .update-age-setting>summary{min-height:36px;padding:6px 8px}
/* Project lists reuse the same four-column scan and on-demand follow-up as My Workbench. */
.app-shell #main-content[data-page-route] .fusion-project-actions .button{min-height:28px;padding:3px 5px;font-size:12px}
.app-shell #main-content[data-page-route] .fusion-projects .fusion-close-followup{min-height:32px;font-size:12px;margin-top:6px}
.app-shell #main-content[data-page-route] .fusion-projects .row-copy-details>summary{min-height:26px}
@media(min-width:701px){
 .app-shell #main-content[data-page-route] .fusion-project-actions{position:absolute;right:6px;top:38px;padding:0;max-width:150px;gap:3px}
 .app-shell #main-content[data-page-route] .fusion-project-row:has(.fusion-project-disclosure[open])>.fusion-project-actions{position:static;padding:0 10px 8px;max-width:none}
 .app-shell #main-content[data-page-route] :is(.fusion-project-head,.fusion-project-summary){grid-template-columns:minmax(0,28fr) minmax(0,25fr) minmax(0,30fr) minmax(150px,17fr)}
 .app-shell #main-content[data-page-route] .fusion-project-summary{min-height:84px}
 .app-shell #main-content[data-page-route] :is(.business-order-table,.business-project-table,.pending-table) th{padding:8px 10px;font-size:12px}
 .app-shell #main-content[data-page-route] :is(.business-order-table,.business-project-table,.pending-table) td{padding:10px;font-size:13px;line-height:1.5}
 .app-shell #main-content[data-page-route] :is(.business-order-table,.business-project-table,.pending-table) .row-link{font-size:14px;line-height:1.5}
 .app-shell #main-content[data-page-route] .business-order-table .button{min-height:32px;font-size:12px;padding:5px 8px}
}
/* Collection cards: identity once, overview once, independent amounts and dates when expanded. */
.app-shell #main-content[data-page-route] .collection-workspace{gap:10px}
.app-shell #main-content[data-page-route] .collection-contract-list{gap:10px}
.app-shell #main-content[data-page-route] .collection-contract-card{border-radius:10px}
.app-shell #main-content[data-page-route] .contract-heading{padding:10px 14px 6px;gap:10px}
.app-shell #main-content[data-page-route] .contract-heading>div:first-child{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 12px}
.app-shell #main-content[data-page-route] .contract-heading .cn-title{font-size:14px;line-height:1.5}
.app-shell #main-content[data-page-route] .contract-heading .cn-contract{font-size:13px}
.app-shell #main-content[data-page-route] .contract-heading .cell-sub{margin:0;font-size:12px}
.app-shell #main-content[data-page-route] .contract-heading-actions .button{min-height:32px;padding:5px 10px;font-size:13px;white-space:nowrap}
.app-shell #main-content[data-page-route] .contract-overview{padding:2px 14px 8px;gap:18px}
.app-shell #main-content[data-page-route] .contract-progress-label{margin-bottom:4px}
.app-shell #main-content[data-page-route] .contract-progress-label strong{font-size:14px}
.app-shell #main-content[data-page-route] .contract-progress-track{height:6px}
.app-shell #main-content[data-page-route] .contract-money-bucket>strong{font-size:16px;line-height:1.5}
.app-shell #main-content[data-page-route] :is(.contract-nodes,.contract-received)>summary{padding:7px 14px;min-height:32px;font-size:13px}
.app-shell #main-content[data-page-route] .collection-flat-table :is(th,td){padding:8px 10px;font-size:13px}
.app-shell #main-content[data-page-route] .collection-flat-table .cn-balance-value{font-size:14px}
.app-shell #main-content[data-page-route] .collection-tab{min-height:36px;padding:0 12px;font-size:13px}
/* Other daily pages share the density without changing chart geometry or report contents. */
.app-shell #main-content[data-page-route] .insight{gap:12px}
.app-shell #main-content[data-page-route] .insight .i-brief{padding:12px 16px}
.app-shell #main-content[data-page-route] .insight .i-brief-text{font-size:16px;line-height:1.65}
.app-shell #main-content[data-page-route] .insight :is(.i-gauge,.i-kpi){padding:12px;gap:6px}
.app-shell #main-content[data-page-route] .insight .i-big{font-size:28px}
.app-shell #main-content[data-page-route] .insight .i-p-head{padding:12px 14px 8px}
.app-shell #main-content[data-page-route] .weekly{gap:12px;padding:10px;max-width:none}
.app-shell #main-content[data-page-route] :is(.weekly-form,.weekly-report){padding:12px;gap:10px;border-radius:10px}
.app-shell #main-content[data-page-route] .pending-filters{gap:10px;margin:10px 0}
@media(max-width:700px){
 .app-shell #main-content[data-page-route] .page-header{gap:8px;margin-bottom:12px}
 .app-shell #main-content[data-page-route] .page-header h1{font-size:22px}
 .app-shell #main-content[data-page-route] .page-header .button{min-height:44px;font-size:13px;padding:8px 10px}
 .app-shell #main-content[data-page-route] .section-tab{min-height:44px;font-size:14px}
 .app-shell #main-content[data-page-route] .list-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px}
 .app-shell #main-content[data-page-route] .list-toolbar .search-field{grid-column:1/-1;width:100%;height:44px}
 .app-shell #main-content[data-page-route] .list-toolbar .search-field input{min-height:42px;height:42px;font-size:16px}
 .app-shell #main-content[data-page-route] .list-toolbar .filters{display:contents}
 .app-shell #main-content[data-page-route] .list-toolbar select{width:100%;max-width:none;min-width:0;min-height:44px;font-size:14px}
 .app-shell #main-content[data-page-route] .list-toolbar>.button,.app-shell #main-content[data-page-route] .update-age-setting>summary{min-height:44px}
 .app-shell #main-content[data-page-route] .fusion-project-actions{position:static;max-width:none;padding:0 12px 8px 32px;gap:8px}
 .app-shell #main-content[data-page-route] .fusion-project-actions .button,.app-shell #main-content[data-page-route] .fusion-projects .fusion-close-followup{min-height:44px;padding:8px 10px;font-size:13px}
 .app-shell #main-content[data-page-route] .inline-followup :is(input,textarea){font-size:16px}
 .app-shell #main-content[data-page-route] .fusion-projects .row-copy-details>summary{min-height:44px}
 .app-shell #main-content[data-page-route] .contract-heading{align-items:flex-start}
 .app-shell #main-content[data-page-route] .contract-heading .cn-title{font-size:15px}
 .app-shell #main-content[data-page-route] .contract-heading-actions .button{min-height:44px}
 .app-shell #main-content[data-page-route] .contract-overview{grid-template-columns:1fr;gap:8px;padding:0 14px 8px}
 .app-shell #main-content[data-page-route] :is(.contract-nodes,.contract-received)>summary{min-height:44px;padding:10px 14px}
 .app-shell #main-content[data-page-route] .collection-flat-table td{padding:0}
 .app-shell #main-content[data-page-route] .collection-flat-table .cn-register{min-height:44px}
 .app-shell #main-content[data-page-route] .collection-tab{min-height:44px;padding:0 10px}
 .app-shell #main-content[data-page-route] .collection-basic-controls :is(button,input,select){min-height:44px}
 .app-shell #main-content[data-page-route] .collection-basic-controls input{font-size:16px}
 .app-shell #main-content[data-page-route] .weekly :is(button,input:not([type=checkbox]),select){min-height:44px}
 .app-shell #main-content[data-page-route] .weekly :is(input:not([type=checkbox]),textarea,select){font-size:16px}
 .app-shell #main-content[data-page-route] .pending-filter{min-width:0;flex:1 1 140px}
 .app-shell #main-content[data-page-route] .pending-filters :is(input,select){min-width:0;width:100%;min-height:44px}
}
@media(min-width:701px){
 /* Rows with archive/restore actions need a flowing action line rather than an absolute two-button slot. */
 .app-shell #main-content[data-page-route] .fusion-project-row:has(>.fusion-project-actions>.button:nth-child(3))>.fusion-project-actions{position:static;max-width:none;padding:0 10px 8px}
}
@media(max-width:700px){
 .app-shell #main-content[data-page-route] .page-header{flex-direction:row;justify-content:space-between}
 .app-shell #main-content[data-page-route] .header-actions{width:auto;flex:0 1 auto;margin:0;max-width:100%}
 /* Keep every order field and its action readable without a horizontal swipe on phones. */
 .app-shell #main-content[data-page-route] .desktop-business-table:has(.business-order-table) .desktop-table-scroll-note{display:none}
 .app-shell #main-content[data-page-route] .business-order-table{min-width:0;width:100%;overflow:visible}
 .app-shell #main-content[data-page-route] .business-order-table :is(table,tbody){display:block;min-width:0;width:100%}
 .app-shell #main-content[data-page-route] .business-order-table thead{display:none}
 .app-shell #main-content[data-page-route] .business-order-table tbody>tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px;padding:12px;border-bottom:1px solid var(--line)}
 .app-shell #main-content[data-page-route] .business-order-table td{display:block;min-width:0;width:auto;max-width:none;padding:0;border:0;font-size:14px;white-space:normal;overflow-wrap:anywhere}
 .app-shell #main-content[data-page-route] .business-order-table td::before{display:block;content:attr(data-label);font-size:12px;color:var(--muted);font-weight:500;margin-bottom:3px}
 .app-shell #main-content[data-page-route] .business-order-table :is(.business-client,.order-equipment,.order-amount,.order-dates,.business-action){grid-column:1/-1}
 .app-shell #main-content[data-page-route] .business-order-table :is(.business-client,.business-action)::before{display:none}
 .app-shell #main-content[data-page-route] .business-order-table .business-action{justify-self:end}
 .app-shell #main-content[data-page-route] .business-order-table .order-row-actions{display:flex;align-items:center;gap:8px}
 .app-shell #main-content[data-page-route] .business-order-table :is(.button,.order-more-menu>summary,.order-project-link){min-height:44px}
}
@media(max-width:700px){.app-shell #main-content[data-page-route] .business-order-table .order-row-actions{flex-direction:row;justify-content:flex-end}}
@media(max-width:700px){
 .app-shell #main-content[data-page-route] .page-header{display:flex}
 .app-shell #main-content[data-page-route] .header-actions{padding:0}
}
/* Only the payment reminder card remains below the list; it spans the row and disappears when empty. */
.app-shell #main-content[data-page-route] .my-workbench-attention{grid-template-columns:minmax(0,1fr)}
.app-shell #main-content[data-page-route] .my-workbench-attention:empty{display:none}
/* Project page: no empty follow-up aside; on phones the tabs come before the latest follow-up note. */
.project-followup-sidebar:empty{display:none}
@media(max-width:700px){
 .project-detail-stack>.project-intro-info{order:0}
 .project-detail-stack>.section-tabs{order:1}
 .project-detail-stack>.project-tab-main{order:2;margin-bottom:16px}
 .project-detail-stack>.progress-overview{order:3}
 .project-detail-stack>.project-followup-sidebar{order:4}
}
/* Collections: empty status tabs step back; on phones the status tabs stay on one swipeable line. */
.app-shell #main-content[data-page-route] .collection-tab.is-zero:not(.active){color:var(--muted,#8b9bab);background:transparent;border-color:transparent}
@media(max-width:700px){
 .app-shell #main-content[data-page-route] .collection-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
 .app-shell #main-content[data-page-route] .collection-tabs::-webkit-scrollbar{display:none}
 .app-shell #main-content[data-page-route] .collection-tab{flex:0 0 auto}
}
/* Pending list: a contract's second gap follows directly under the first; the scope note folds away. */
.app-shell #main-content[data-page-route] .pending-line.pending-line-same{border-top:0;padding-top:4px}
.app-shell #main-content[data-page-route] .pending-owner{display:block;margin-top:2px}
.app-shell #main-content[data-page-route] :is(.pending-scope-note,.pending-filters,.pending-no-match){padding-inline:14px}
.app-shell #main-content[data-page-route] .pending-scope-note>summary{font-size:12px;color:var(--muted,#8b9bab);cursor:pointer;min-height:28px}
/* Leader brief: merged reason chips, and a one-line quiet week instead of seven empty day cards. */
.insight .i-chips{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;align-self:center}
.insight .i-quiet{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:4px 16px 14px}
.insight .i-quiet p{margin:0}
.insight .i-quiet .i-morebtn{width:auto;flex:none;padding-inline:14px}
.insight .i-mchart.i-sparse{height:120px}
/* Read aloud but not shown: the customer already heads its group. */
.fusion-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The customer name is a link-style button; its reset used to live only in the desktop stylesheet block. */
@media(max-width:900px){
 .detail-client-heading{border:0;background:none;padding:0;color:var(--ink,#2c405d);font-size:inherit;font-weight:640;line-height:1.4;text-align:left;cursor:pointer}
}

/* Keep the existing overdue signal visible while the contract details are folded. */
.app-shell #main-content[data-page-route] .contract-heading-actions>.badge.red{display:inline-flex;align-items:center;gap:5px;color:#9a4448;background:transparent;white-space:nowrap}
.app-shell #main-content[data-page-route] .contract-heading-actions>.badge.red::before{content:"!";display:inline-flex;align-items:center;justify-content:center;flex:0 0 16px;width:16px;height:16px;border-radius:50%;background:#b94e50;color:#fff;font:700 12px/1 system-ui,sans-serif}

/* Shared compact, keyboard-accessible overdue entry point. */
.app-shell .overdue-indicator{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:none;min-height:32px;padding:3px 6px;border:0;border-radius:5px;background:transparent;color:#9a4448;font:600 12px/1.4 system-ui,sans-serif;white-space:nowrap;cursor:pointer}
.app-shell .overdue-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 16px;width:16px;height:16px;border-radius:50%;background:#b94e50;color:#fff;font:700 12px/1 system-ui,sans-serif}
.app-shell .overdue-indicator:hover{background:#fff0f0}
.app-shell .fusion-customer-group[open]>.fusion-group-header>.overdue-indicator{display:none}
@media(max-width:700px){.app-shell .overdue-indicator{min-height:36px}}
.flat-project-table td{vertical-align:middle}.flat-project-table .flat-clip{display:block;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flat-project-table .flat-progress{display:flex;flex-direction:column;gap:2px}.sort-head{all:unset;cursor:pointer;font:inherit;color:inherit}.sort-head:hover{color:#2d4a63}.flat-project-table tr.project-open-row{cursor:pointer}.flat-project-table tr.project-open-row:hover{background:#f4f8fb}