/* Shared spacing for desktop and installed portal layouts. */
#v :is(.card,.hero,.editPanel,.messageWorkspace,.reportsPage){min-width:0;box-sizing:border-box}
#v :is(.two,.wfGrid,.posLayout,.posTools,.meetingGrid,.uploadGrid){gap:var(--ws-space-4)}
#v .card>h2,#v .card>h3{margin-top:0;margin-bottom:12px;line-height:1.3}
#v .card>p{line-height:1.6;margin-top:0;margin-bottom:var(--ws-space-4)}
#v .card>:last-child{margin-bottom:0}
#v :is(.f,.wfFields){row-gap:14px!important}
#v .f>label{margin-block:0;line-height:1.45}
#v :is(.f,.reportControls,.projectVisibility) label>:is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){margin-block:6px 0}
#v :is(.f,.wfFields,.reportControls)>*{min-width:0}
#v :is(.actions,.clientActions,.teamActions,.contractActions,.payrollActions,.wfActions,.docactions,.squareConnectionActions,.posTabs,.reportActions){gap:12px!important;flex-wrap:wrap}
#v :is(.actions,.clientActions,.teamActions,.contractActions,.payrollActions,.wfActions,.docactions,.squareConnectionActions)>button{white-space:normal;line-height:1.4;min-height:44px}
#v :is(.itemHead,.clientCard,.meetingItemTop,.periodListHeader){gap:16px}
#v :is(.row,.invoiceRow,.expenseRow,.contractRow,.posOrder){padding-block:16px}
#v :is(.editPanel,.taskSubmission,.taskReview){margin-top:16px}
#v :is(.periodToolbar,.periodFilterBar,.meetingReminderControls){gap:14px;row-gap:12px}
#v :is(.periodToolbar,.periodFilterBar)+*{margin-top:16px}
#v :is(.muted,.meta,.reportNotice){line-height:1.5;overflow-wrap:anywhere}
#v :is(.reportSummary,.reportCharts)+*{margin-top:20px}
#v .reportFigure{padding:18px}
#v .reportFigure figcaption{line-height:1.45;margin-bottom:16px}
#v .reportMetric{padding:18px}
#v .reportMetric strong{line-height:1.3;margin-bottom:6px}
#v .reportPager{gap:12px;margin-top:18px}
#v .reportControls label{gap:8px}
#v .reportControls label>:is(input,select){margin-top:0}
#v .groupParticipants{padding:16px}
#v .groupParticipants label{gap:12px;min-height:44px}
@media screen and (max-width:720px){
 #v :is(.card,.hero){padding:18px!important}
 #v :is(.two,.wfGrid,.posLayout,.posTools,.meetingGrid,.uploadGrid,.messageWorkspace,.reportsPage){gap:16px!important}
 #v :is(.f,.wfFields){row-gap:12px!important}
 #v :is(.actions,.clientActions,.teamActions,.contractActions,.payrollActions,.wfActions,.docactions,.squareConnectionActions,.reportActions){gap:10px!important}
 #v :is(.actions,.clientActions,.teamActions,.contractActions,.payrollActions,.wfActions,.docactions,.squareConnectionActions)>button{min-height:46px!important}
 #v :is(.row,.invoiceRow,.expenseRow,.contractRow,.posOrder){padding-block:16px!important}
 #v :is(.reportFigure,.reportMetric,.groupParticipants){padding:14px}
 #v :is(.reportSummary,.reportCharts)+*{margin-top:16px}
 #v .periodToolbar{row-gap:14px}
}

/* Opaque surfaces prevent uneven tinting and overlapping background glows. */
:root{--portal-canvas:#f5f7f9;--portal-surface:#ffffff;--portal-navigation:#0d2747}
html,body,.shell,.main,.mainFrame{background:var(--portal-canvas)!important;background-image:none!important}
.auth,.side{background:var(--portal-navigation)!important;background-image:none!important;box-shadow:none!important}
.auth::before,.auth::after,.side::after,.main::before,.main::after,.hero::before,.hero::after{display:none!important}
.login,.top,#v .card,#v .hero,#v .dashboardTile,#v .workforceDirectory,#v .portalCurrency{background:var(--portal-surface)!important;background-image:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
#v .contractGate,#v .fileDropZone,#v .periodToolbar,#v .tcMonthNav,#v .projectWorkspaceNav{background:#f5f8fa!important;background-image:none!important;box-shadow:none!important}
.accessGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px;margin:20px 0}
.accessChoice{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid #d9e3e9;border-radius:10px;line-height:1.5;min-width:0}
.accessChoice input[type=checkbox]{width:20px!important;height:20px!important;min-height:20px!important;flex:0 0 20px;margin:2px 0 0!important}
.accessChoice span{min-width:0;overflow-wrap:anywhere}.accessChoice small{display:block;color:#546675;margin-top:5px}
#accessDelegates{display:grid;gap:12px}

.accessModule{min-width:0;margin:0;padding:14px;border:1px solid var(--line,#dce3ea);border-radius:12px;background:#fff}.accessModule legend{padding:0 6px;font-weight:600}.accessModule .accessChoice{border:0;padding:8px 0;margin:0}.accessModule small{display:block;margin-top:6px;color:#526174}