/* General Construction — shared liquid-glass materials.
   Loaded last in the Office shell and appended to all shadow-root workspaces.
   Layout, record workflows and semantic status colours stay module-owned. */
:root,:host{
 color:var(--ink);
 --ink:#191d1a;--text:var(--ink);--muted:#69716c;--canvas:#f2f4f1;
 --line:rgba(31,36,33,.11);--surface:rgba(255,255,255,.68);--soft:rgba(245,248,245,.56);
 --panel:rgba(255,255,255,.72);--panel-solid:#f7f9f6;
 --accent:#bb3542;--accent-fill:#d53243;--accent-hover:#bd283a;--accent-soft:rgba(214,55,73,.075);--accent-line:rgba(211,65,78,.27);
 --brand-red:#d43a46;--brand-orange:#d9414d;--brand-red-dark:#a92836;
 --radius:16px;--radius-card:16px;--radius-control:11px;--radius-dialog:23px;
 --glass-panel:linear-gradient(145deg,rgba(255,255,255,.83),rgba(255,255,255,.59));
 --glass-inset:linear-gradient(145deg,rgba(255,255,255,.58),rgba(248,250,247,.35));
 --glass-control:linear-gradient(145deg,rgba(255,255,255,.84),rgba(255,255,255,.48));
 --glass-hover:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,255,255,.68));
 --glass-dialog:linear-gradient(145deg,rgba(250,252,249,.97),rgba(242,246,242,.92));
 --glass-edge:rgba(255,255,255,.82);--glass-outline:rgba(27,35,29,.06);
 --glass-highlight:inset 0 1px 0 rgba(255,255,255,.72);
 --glass-shadow:0 18px 50px rgba(28,34,30,.065),inset 0 0 0 1px var(--glass-outline),var(--glass-highlight);
 --glass-control-shadow:0 3px 10px rgba(28,34,30,.035),inset 0 1px 0 rgba(255,255,255,.76);
 --shadow:var(--glass-shadow);--shadow-hover:0 20px 45px rgba(28,34,30,.10),var(--glass-highlight);
 --shadow-dialog:0 30px 90px rgba(13,21,16,.25),inset 0 1px 0 rgba(255,255,255,.75);
 --glass-blur:blur(22px) saturate(140%);
}
html[data-theme=dark],:host([data-theme=dark]){
 color-scheme:dark;--ink:#f2f5f3;--text:var(--ink);--muted:#a9b3ad;--canvas:#111412;--line:rgba(232,240,235,.12);
 --surface:rgba(30,36,32,.78);--soft:rgba(41,49,43,.50);--panel:rgba(27,32,29,.82);--panel-solid:#1b211d;
 --accent:#f197a2;--accent-soft:rgba(221,90,111,.13);--accent-line:rgba(225,115,134,.32);
 --glass-panel:linear-gradient(145deg,rgba(42,49,44,.84),rgba(25,31,27,.76));
 --glass-inset:linear-gradient(145deg,rgba(44,53,47,.58),rgba(26,32,28,.42));
 --glass-control:linear-gradient(145deg,rgba(54,64,57,.8),rgba(33,40,35,.64));
 --glass-hover:linear-gradient(145deg,rgba(67,77,70,.85),rgba(38,48,41,.75));
 --glass-dialog:linear-gradient(145deg,rgba(36,43,38,.97),rgba(20,27,22,.96));
 --glass-edge:rgba(255,255,255,.10);--glass-outline:rgba(255,255,255,.025);
 --glass-highlight:inset 0 1px 0 rgba(255,255,255,.08);
 --glass-shadow:0 18px 50px rgba(0,0,0,.20),inset 0 0 0 1px var(--glass-outline),var(--glass-highlight);
 --glass-control-shadow:0 3px 12px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.09);
 --shadow:var(--glass-shadow);--shadow-hover:0 22px 48px rgba(0,0,0,.28),var(--glass-highlight);
 --shadow-dialog:0 30px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.10);
}
/* One viewport-sized canvas for every Office page, independent of content height. */
body,.office{background:radial-gradient(ellipse at 76% -10%,rgba(239,51,64,.11),transparent 34%),radial-gradient(ellipse at 26% 110%,rgba(42,103,212,.075),transparent 38%),var(--canvas);background-attachment:fixed;background-size:100vw 100vh;background-repeat:no-repeat}
html[data-theme=dark] :is(body,.office){background:radial-gradient(ellipse at 76% -10%,rgba(211,65,78,.16),transparent 34%),radial-gradient(ellipse at 26% 110%,rgba(60,115,215,.1),transparent 38%),var(--canvas);background-attachment:fixed;background-size:100vw 100vh;background-repeat:no-repeat}
/* The charcoal rail and selected glass capsule match the supplied references. */
.office>.sidebar{background:linear-gradient(175deg,rgba(39,34,34,.99),rgba(17,18,17,.99));border-right:1px solid rgba(255,255,255,.09);box-shadow:18px 0 55px rgba(0,0,0,.13)}
.office>.sidebar::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:24px 24px}
.sidebar>.brand,.sidebar>.nav-caption,.sidebar>nav,.sidebar>.sidebar-bottom{position:relative;z-index:1}
.sidebar .brand{gap:10px;margin-bottom:26px;align-items:center}.sidebar .brand-mark{width:38px;height:38px;flex:0 0 38px;background:#fff;border-radius:11px;display:grid;place-items:center;overflow:hidden;box-shadow:0 8px 28px rgba(239,51,64,.16),inset 0 0 0 1px rgba(255,255,255,.5)}
.sidebar .brand-mark img{width:78%;height:78%;object-fit:contain;display:block}.sidebar .brand-wordmark{width:132px;height:auto;display:block;filter:brightness(0) invert(1);opacity:.95}
.sidebar .nav-item{min-height:42px;border-radius:11px;color:#aeb4b0;background:transparent;border:1px solid transparent;box-shadow:none;transition:background 180ms ease,color 180ms ease,box-shadow 180ms ease}
.sidebar .nav-item:hover{background:rgba(255,255,255,.05);color:#fff}
.sidebar .nav-item.selected,.sidebar .nav-item[aria-current=page]{color:#fff;background:linear-gradient(100deg,rgba(239,51,64,.20),rgba(211,65,78,.07));border-color:rgba(255,255,255,.015);box-shadow:inset 2px 0 #ef3340,inset 0 1px 0 rgba(255,255,255,.025);backdrop-filter:blur(14px) saturate(135%);-webkit-backdrop-filter:blur(14px) saturate(135%)}
.sidebar .nav-item.selected:hover{background:linear-gradient(100deg,rgba(239,51,64,.26),rgba(211,65,78,.10))}
.sidebar .profile{border:1px solid rgba(255,255,255,.075);border-radius:13px;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}.sidebar .profile:hover{background:rgba(255,255,255,.085)}
/* Shared translucent header, without changing navigation or viewport sizing. */
.office .topbar,.office:has(.work-quotes-view) .topbar{background:var(--glass-panel);border-bottom:1px solid var(--line);border-radius:0 0 20px 20px;box-shadow:0 7px 30px rgba(28,34,30,.045),inset 0 1px 0 var(--glass-edge);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.office .department,.office .global-search{border:1px solid var(--line);border-radius:12px;background:var(--glass-control);box-shadow:var(--glass-control-shadow)}.office .department select{background:transparent;color:var(--text)}
/* Cards, project registers, directories, financial/legal/PM/Webmaster surfaces. */
:is(.panel,.metric,.ed-metric,.glass-panel,.record-card,.directory-card,.profile-panel,.profile-hero,.work-toolbar,.table-panel,.drive-panel,.work-detail-tabs,.estimate-metric,.stat-card,.quote-card,.request-card,.contract-group-panel,.project-information,.quote-settings,.quote-items-shell,.finance-panel,.finance-kpi,.finance-project-card,.pm-project-card,.pm-panel,.webmaster-panel,.member-card,.knowledge-card,.login-card){background:var(--glass-panel);border-color:var(--glass-edge);box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
:is(.panel,.metric,.ed-metric,.profile-panel,.profile-hero,.work-toolbar,.table-panel,.drive-panel,.quote-card,.request-card,.member-card,.knowledge-card){border-radius:var(--radius-card)}
:is(.record-card.work-card,.directory-grid>.directory-card,.ed-metric,.quote-card):hover{background:var(--glass-hover);border-color:var(--accent-line);box-shadow:var(--shadow-hover)}
.content :is(.record-card.work-card,.directory-grid>.directory-card):hover{background:var(--glass-hover)}
/* Small nested surfaces use a lighter material, keeping numeric/status colours. */
:is(.filters-panel,.directory-toolbar,.sub-toolbar,.work-filter-row,.collection-toolbar,.estimate-toolbar,.project-detail-overview,.work-fact,.directory-card-profile,.finance-close-checklist,.request-context>div,.request-documents,.bid-entry,.linked-documents,.request-message,.project-summary-panel,.project-quote-contract-summary,.scope-section,.drive-folder,.drive-connection,.mini-kpis article,.mini-kpis button){background:var(--glass-inset);border-color:var(--line);box-shadow:var(--glass-highlight)}
.ed-calendar-toolbar,.ed-task-toolbar,.ed-weekdays,.ed-tasks-more,.ed-task-form,.ed-tasks-dialog .ed-task-toolbar,.drive-toolbar,.drive-footer{background:var(--glass-inset)}
.ed-day.outside{background:rgba(115,133,119,.045)}.ed-day-quotes{isolation:isolate}
/* Controls: slightly convex highlights, translucent neutral fill, red primary. */
:is(body,:host) :is(.button,.secondary-button,.icon-button,.avatar-button,.row-arrow,.filter-chip,.sort-select,.filter-select,.portal-button,.topbar-search,.notification-bell,.file-drop-browse,.table-open,.quote-project-drive-action,.scope-library button,.quote-settings>button,.category-order-buttons button,.item-row-actions button,.document-list button,.approval-list button,.status-actions button,.modal-heading>button,.drawer-heading>button,.item-drawer-head button,.notification-panel-head>button){background:var(--glass-control);border:1px solid var(--line);border-radius:var(--radius-control);box-shadow:var(--glass-control-shadow);color:var(--text)}
:is(body,:host) :is(.button,.secondary-button,.icon-button,.avatar-button,.row-arrow,.filter-chip,.notification-bell,.table-open):not(:disabled):hover{background:var(--glass-hover);border-color:var(--accent-line);box-shadow:0 5px 16px rgba(28,34,30,.075),var(--glass-highlight)}
:is(body,:host) :is(.primary,.primary-button),.work-quotes-view .work-hero>.primary{color:#fff;border:1px solid #d72b3a;background:linear-gradient(145deg,#dc4250,#d32e40);box-shadow:0 9px 24px rgba(213,44,57,.19),inset 0 1px 0 rgba(255,255,255,.30);border-radius:11px}
:is(body,:host) :is(.primary,.primary-button):not(:disabled):hover{background:linear-gradient(145deg,#e04b59,#bd2538);box-shadow:0 11px 28px rgba(213,44,57,.26),inset 0 1px 0 rgba(255,255,255,.34)}
:is(body,:host) :is(.primary,.primary-button):not(:disabled):active{box-shadow:inset 0 2px 5px rgba(113,8,26,.2)}
:is(.view-switch,.segments,.segmented,.profile-tabs,.work-detail-tabs,.legal-workspace-tabs,.pm-kind-tabs,.pm-schedule-tabs,.drive-v2-view){background:var(--glass-inset);border-color:var(--line);box-shadow:var(--glass-highlight);border-radius:13px}
:is(.view-switch,.segments,.segmented,.profile-tabs,.legal-workspace-tabs,.pm-kind-tabs,.pm-schedule-tabs,.drive-v2-view)>button{border-radius:9px}
:is(.view-switch,.segments,.segmented,.profile-tabs,.legal-workspace-tabs,.pm-kind-tabs,.pm-schedule-tabs,.drive-v2-view)>button:is(.active,[aria-selected=true],[aria-pressed=true]){background:var(--glass-control);color:var(--accent);box-shadow:0 3px 10px rgba(28,34,30,.06),var(--glass-highlight);border-color:var(--accent-line)}
:is(.work-detail-tabs>button[aria-selected=true],.quote-section-tabs button.active,.portal-picker button.enabled,.permission-list button.enabled){background:var(--accent-soft);border-color:var(--accent-line);box-shadow:var(--glass-highlight)}
/* Inputs preserve semantic labels, sizing, checkbox rendering and focus rings. */
:is(body,:host) :is(.input-wrap,.form-field input,.form-field select,.form-field textarea,.modal input:not([type=checkbox]):not([type=radio]),.modal select,.modal textarea,.form-modal input:not([type=checkbox]):not([type=radio]),.form-modal select,.form-modal textarea,.ed-task-form input,.ed-task-form select,.ed-task-form textarea,.drive-toolbar input,.drive-toolbar select,.work-filter-row select,.quote-settings input,.quote-settings select,.quote-category-tools input,.estimate-item-drawer input:not([type=checkbox]),.estimate-item-drawer select,.estimate-item-drawer textarea,.bid-request-drawer input:not([type=checkbox]),.bid-request-drawer select,.bid-request-drawer textarea,.directory-trade-filter select,.portal-preview-select select){background:var(--glass-control);border-color:var(--line);border-radius:var(--radius-control);box-shadow:inset 0 1px 3px rgba(28,34,30,.025),var(--glass-highlight);color:var(--text)}
:is(body,:host) .input-wrap input{background:transparent;border:0;box-shadow:none}
:is(body,:host) :is(input,select,textarea):focus-visible{outline:2px solid var(--focus,#4678ab);outline-offset:2px}
/* Tables remain readable over the material; sticky headers stay more opaque. */
:is(.table-panel,.directory-table,.work-table,.quote-table,.finance-table,.project-quote-table) table{background:transparent}
:is(thead th,.table-heading,.category-heading){background:var(--glass-inset);border-color:var(--line);color:var(--muted)}
:is(.table-panel,.directory-table,.work-table,.quote-table,.finance-table,.project-quote-table) tbody tr:hover td{background:rgba(128,146,132,.06)}
/* Dialogs and popovers retain enough opacity for long forms and dense records. */
:is(.modal,.form-modal,.ed-dialog,.estimate-item-drawer,.bid-request-drawer,.member-drawer,.notification-panel,.portal-menu,.project-document-picker,.pm-action-modal,.finance-modal){background:var(--glass-dialog);border:1px solid var(--glass-edge);box-shadow:var(--shadow-dialog);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);color:var(--text)}
:is(.modal,.form-modal,.ed-dialog,.notification-panel,.portal-menu){border-radius:var(--radius-dialog)}
:is(.modal>header,.modal-heading,.item-drawer-head,.drawer-heading,.notification-panel-head){background:var(--glass-inset);border-color:var(--line)}
.modal-backdrop,.drawer-backdrop{background:rgba(13,16,14,.42);backdrop-filter:blur(8px) saturate(115%);-webkit-backdrop-filter:blur(8px) saturate(115%)}
/* A material must not trap a descendant's fixed dialog or popup. */
:is(.panel,.glass-panel,.record-card,.directory-card,.quote-settings,.project-information,.quote-items-shell):has(.modal-backdrop,.drawer-backdrop){backdrop-filter:none;-webkit-backdrop-filter:none;transform:none}
/* More specific legacy dark rules otherwise force opaque white/charcoal fills. */
:is(html[data-theme=dark],:host([data-theme=dark])) :is(.glass-panel,.quote-settings,.project-information,.quote-items-shell,.estimate-metric,.stat-card,.quote-card,.contract-group-panel){background:var(--glass-panel);border-color:var(--glass-edge);box-shadow:var(--glass-shadow)}
:is(html[data-theme=dark],:host([data-theme=dark])) :is(.modal,.estimate-item-drawer,.bid-request-drawer,.member-drawer,.notification-panel){background:var(--glass-dialog);border-color:var(--glass-edge)}
:is(html[data-theme=dark],:host([data-theme=dark])) :is(.modal-heading,.item-drawer-head,.drawer-heading,.notification-panel-head){background:var(--glass-inset)}
:is(html[data-theme=dark],:host([data-theme=dark])) :is(.secondary-button,.row-arrow,.icon-button,.filter-chip,.quote-category-tools input,.category-order-buttons button,.item-row-actions button,.modal-heading>button,.notification-panel-head>button,.notification-bell){background:var(--glass-control);color:var(--text);border-color:var(--line)}
/* Legacy native controls and financial figures also follow the material tokens. */
:where(button,input,select,textarea){color:inherit}
:is(.estimate-search,.quote-browser-select,.list-sort-control,.finance-status-select,.finance-group-selector select,.actual-cost-toolbar select,.finance-info-hint){background:var(--glass-control);border-color:var(--line);box-shadow:var(--glass-control-shadow);color:var(--text)}
:is(body,:host) .estimate-search input{background:transparent;box-shadow:none;border:0;color:var(--text)}
:is(.webmaster-section-nav,.finance-chart,.finance-exposure>span,.finance-close-explanation,.finance-quote-totals,.finance-quote-item){background:var(--glass-inset);border-color:var(--line)}
.webmaster-section-nav button.active{background:var(--glass-control);color:var(--accent);box-shadow:var(--glass-control-shadow)}
.finance-metric>strong,.finance-control-line strong,.finance-project-link strong,.finance-exposure strong{color:var(--text)}
:is(.finance-metric>span,.finance-metric>small,.finance-control-line em,.finance-chart-scale,.finance-chart-group>span,.finance-chart-legend,.finance-empty>span,.finance-exposure small,.finance-close-explanation){color:var(--muted)}
.finance-control-line>i{background:var(--line)}
.finance-chart::before{background:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 48px)}
:is(html[data-theme=dark],:host([data-theme=dark])) :is(.estimate-search,.finance-info-hint){background:var(--glass-control);color:var(--text);border-color:var(--line)}
:is(html[data-theme=dark],:host([data-theme=dark])) .webmaster-section-nav{background:var(--glass-inset)}
:is(html[data-theme=dark],:host([data-theme=dark])) .webmaster-section-nav button.active{background:var(--glass-control);color:var(--accent)}
:is(html[data-theme=dark],:host([data-theme=dark])) .orange-text{color:#f197a2!important}
:is(html[data-theme=dark],:host([data-theme=dark])) .green-text{color:#8bd3ae!important}
:is(html[data-theme=dark],:host([data-theme=dark])) :is(.finance-bars i.revenue,.finance-chart-legend i.revenue){background:#74b697}
/* Preserve solid document previews and semantic warnings; only the UI is glass. */
.notice-paper,.notice-document,.pdf-page{backdrop-filter:none;-webkit-backdrop-filter:none}
@media(max-width:600px){.modal,.form-modal,.ed-dialog{border-radius:0}.office .topbar{backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}}
@media(prefers-reduced-transparency:reduce){:root,:host{--glass-panel:var(--panel-solid);--glass-control:var(--panel-solid);--glass-dialog:var(--panel-solid);--glass-inset:var(--panel-solid);--glass-blur:none}}
@media(forced-colors:active){:root,:host{--glass-panel:Canvas;--glass-control:Canvas;--glass-dialog:Canvas;--glass-inset:Canvas;--glass-edge:CanvasText;--glass-shadow:none;--glass-control-shadow:none;--glass-blur:none}.sidebar .nav-item.selected{outline:2px solid Highlight;outline-offset:-2px}.brand-wordmark{filter:none!important}}
/* Complete the same material across project tools and external portals. */
:is(.field-site-card,.field-task-panel,.field-time-panel,.field-report-composer,.field-report-history,.subcontractor-document-library,.client-scope-list,.client-contract-sections,.client-contract-scope,.signature-section,.signed-confirmation,.tv-board .tv-panel,.tv-planner-stage,.tv-planner-section,.tv-project-planner-card,.tv-notification-grid>article){background:var(--glass-panel);border-color:var(--glass-edge);box-shadow:var(--glass-shadow)}
:is(.field-quick-actions button,.pm-quick-actions button,.project-record-head-actions button,.project-note-actions button,.project-route-actions button,.project-drive-actions button,.project-upload-button,.project-file-row>div :is(a,button),.pm-record-actions button,.drive-v2-location>div:last-child button,.drive-v2-file-actions :is(a,button),.estimate-toolbar>div:last-child button,.estimate-project-card button,.badge-picker button,.linked-documents a,.project-document-picker-head>button,.webmaster-tv-actions button,.webmaster-tv-actions a,.subcontractor-picker-trigger){background:var(--glass-control);border-color:var(--line);box-shadow:var(--glass-control-shadow);color:var(--text)}
:is(.project-note-editor textarea,.project-note-input-wrap textarea,.project-scope-form textarea,.project-team-editor-grid select,.project-edit-grid :is(input,select),.project-file-row select,.drive-v2-structure-picker select,.project-document-picker-tools input,.project-document-picker-tools select,.client-signer-grid input,.client-reject-box textarea,.field-project-select select,.field-report-composer :is(input,select,textarea),.subcontractor-name-search,.trade-category-control,.login-form label>div){background:var(--glass-control);border-color:var(--line);color:var(--text);box-shadow:var(--glass-control-shadow)}
:is(.project-record-tabs,.notification-toolbar,.field-report-types,.pm-workspace-nav,.project-workspace-nav){background:var(--glass-inset);border-color:var(--line)}
:is(.project-record-tabs button,.notification-toolbar>div button,.field-report-types button,.pm-kind-tabs button).active{background:var(--glass-control);box-shadow:var(--glass-control-shadow);color:var(--accent)}
:is(.department-menu,.subcontractor-picker-popover,.portal-document-preview){background:var(--glass-dialog);border-color:var(--glass-edge);box-shadow:var(--shadow-dialog);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.modal-overlay{background:rgba(13,16,14,.42);backdrop-filter:blur(8px) saturate(115%);-webkit-backdrop-filter:blur(8px) saturate(115%)}
:is(.panel,.glass-panel,.record-card,.directory-card,.quote-settings,.project-information,.quote-items-shell):has(.modal-overlay,.modal-backdrop,.drawer-backdrop){backdrop-filter:none;-webkit-backdrop-filter:none;transform:none}
/* Preserve the current responsive header geometry and dropdown typography. */
.office>.stage>.topbar{background:var(--glass-panel);border-color:var(--glass-edge);box-shadow:0 7px 30px rgba(28,34,30,.045),var(--glass-highlight)}
.office .topbar :is(.department,.global-search),.office .topbar-actions>:is(.icon-button,.avatar-button){background:var(--glass-control);border-color:var(--line);box-shadow:var(--glass-control-shadow);color:var(--text)}
.office .topbar .global-search{color:var(--muted)}
.office .department-menu{background:var(--glass-dialog);border-color:var(--glass-edge);box-shadow:var(--shadow-dialog)}
.office .department>span{text-transform:none;letter-spacing:normal;color:inherit}
.office .department small{color:var(--muted)}
:is(html[data-theme=dark],:host([data-theme=dark])) :is(.field-site-card,.field-task-panel,.field-time-panel,.field-report-composer,.field-report-history,.client-scope-list,.client-contract-sections,.client-contract-scope,.signature-section,.signed-confirmation){background:var(--glass-panel);color:var(--text)}
/* Clear keyboard state on both the dark rail and translucent controls. */
.sidebar .nav-item:focus-visible{outline:2px solid #ff9aa5;outline-offset:2px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root,:host{--glass-panel:var(--panel-solid);--glass-control:var(--panel-solid);--glass-dialog:var(--panel-solid);--glass-inset:var(--panel-solid)}}