/* Shared control layout: loaded after page styles so each workspace follows
   the same sizing, wrapping and action spacing rules. */
/* Use the whole desktop content column while retaining normal edge padding. */
@media(min-width:900px){
  #app main.content{width:100%;min-width:0;max-width:none;margin-inline:0}
  #app main.content>.view{width:100%;min-width:0;max-width:none;margin-inline:0}
  #settingsView .settings-shortcuts{max-width:none}
}
/* Action groups own their spacing. Never add margins to every button: that
   would displace calendar cells, navigation and the chat composer. */
:is(.view,.modal,.v51-modal,.st-whv-modal,.auth-panel) :is(.settings-panel-actions,.import-actions,.report-filter-export,.page-heading-actions,.expense-head-actions,.asset-actions,.pattern-actions,.leave-actions,.privacy-actions,.account-actions,.st-whv-action-row,.st-whv-foot-actions,.st-whv-review-actions){display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;min-width:0}
:is(.view,.modal,.v51-modal,.st-whv-modal,.auth-panel) :is(.settings-panel-actions,.import-actions,.report-filter-export,.page-heading-actions,.expense-head-actions,.asset-actions,.pattern-actions,.leave-actions,.privacy-actions,.account-actions,.st-whv-action-row,.st-whv-foot-actions,.st-whv-review-actions)>.btn{margin:0;max-width:100%;padding:10px 14px}
:is(.view,.modal,.v51-modal,.st-whv-modal) :is(.settings-panel-actions,.import-actions,.report-filter-export){margin-top:16px}
.cookie-actions{flex-wrap:wrap;gap:12px}
.cookie-actions>.btn{margin:0;min-height:44px;white-space:normal;line-height:1.4}
:is(.view,.modal,.v51-modal) :is(.settings-form-row,.roster-palette-actions,.credential-scan-actions){gap:12px}
#chatView #chatAccountLayout .chat-roster-actions{gap:8px;flex-wrap:wrap}
#chatView .chat-invite-controls{gap:12px}
#entryModal #entryForm>.modal-actions{gap:12px!important}
#settingsView #calendarManagementToolbar{gap:12px}
#credentialsView .credential-actions{gap:12px}
#reportsView .v54-year-choice{gap:12px}
:is(.view,.modal,.v51-modal,.st-whv-modal,.auth-panel) :is(.field,fieldset,.form-grid,.settings-form-row,.asset-form-grid,.travel-settings-grid,.expense-filter-grid){min-width:0;max-width:100%;box-sizing:border-box}
:is(.view,.modal,.v51-modal,.st-whv-modal,.auth-panel) :is(.form-grid,.asset-form-grid,.travel-settings-grid,.expense-filter-grid)>*{min-width:0}
:is(.view,.modal,.v51-modal,.st-whv-modal,.auth-panel) :is(input,select,textarea){box-sizing:border-box;max-width:100%;min-width:0}
:is(.view,.modal,.v51-modal,.st-whv-modal,.auth-panel) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]):not([type=range]),select,textarea){min-height:44px;line-height:1.4;padding:10px 12px}
:is(.view,.modal,.v51-modal,.st-whv-modal,.auth-panel) textarea{min-height:104px;resize:vertical}
:is(.view,.modal,.v51-modal,.st-whv-modal,.auth-panel) input[type=file]{width:100%;text-overflow:ellipsis;overflow:hidden}
:is(.view,.modal,.v51-modal,.st-whv-modal) :is(label,.field)>small{font-weight:400;line-height:1.5}
:is(.view,.modal,.v51-modal,.st-whv-modal) .field{gap:7px}
:is(.view,.modal,.v51-modal,.st-whv-modal) .btn{
  min-height:44px!important;height:auto;max-width:100%;min-width:0;
  white-space:normal!important;overflow-wrap:anywhere;line-height:1.4!important;
  padding:10px 14px;font-size:.875rem;justify-content:center;text-align:center;
}
:is(.modal-header,.v51-modal-head,.st-whv-modal-head){gap:12px;align-items:flex-start}
:is(.modal-header,.v51-modal-head,.st-whv-modal-head)>:first-child{min-width:0}
:is(.modal-header,.v51-modal-head,.st-whv-modal-head) :is(.btn-icon,.v51-close){flex:0 0 44px;width:44px;min-width:44px;min-height:44px;height:44px;padding:8px;align-self:flex-start}
:is(.modal-header,.v51-modal-head,.st-whv-modal-head) :is(h2,p){overflow-wrap:anywhere}
:is(.modal-header,.v51-modal-head,.st-whv-modal-head) p{margin:8px 0 0;line-height:1.45}
:is(.view,.modal,.v51-modal,.st-whv-modal) :is(.modal-actions,.st-whv-form-actions,.settings-toolbar,.calendar-manage-actions,.v52-area-actions,.privacy-actions){gap:12px;align-items:stretch;flex-wrap:wrap}
:is(.view,.modal,.v51-modal,.st-whv-modal) :is(.modal-actions,.st-whv-form-actions) .btn{margin:0;flex:0 1 auto}
/* Long forms scroll as a whole. Their actions must not cover editable fields.
   The swing confirmation has a separate scrolling body and fixed footer. */
.st-whv-modal:not(.whv-swing-modal) .st-whv-form-actions{position:static;margin-top:20px;padding:16px 0 0;justify-content:flex-end}
#v51ExpenseForm .expense-save-actions{position:static;bottom:auto;margin:20px 0 0;padding:16px 0 0;display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;background:var(--surface);backdrop-filter:none}
#v51ExpenseForm .expense-save-actions .btn{width:auto;flex:1 1 130px;min-width:0;font-size:.875rem}
#v51ReviewPanel .expense-review-dialog .modal-actions{position:static;margin:20px 0 0;padding:16px 0 0}
.st-whv-modal .st-whv-form-grid{gap:16px;align-items:start}
.st-whv-modal .st-whv-form-grid label{gap:7px;font-size:.875rem;line-height:1.45}
.st-whv-modal:not(.whv-swing-modal){max-height:calc(100dvh - 24px);scroll-padding-block:20px;overscroll-behavior:contain}
:is(.modal,.v51-modal){scroll-padding-block:20px}
/* Native date/time controls need the same dark-theme treatment as text fields. */
[data-theme=dark] :is(input,select,textarea){color-scheme:dark}
[data-theme=light] :is(input,select,textarea){color-scheme:light}
/* WHV report sections and the export action have explicit spacing. */
#stWhvModernDashboard>.st-whv-muted{margin:16px 0;line-height:1.55;font-size:.875rem}
#stWhvModernDashboard>.st-whv-stat-grid{margin-top:18px}
#stWhvModernDashboard>.st-whv-panel-card{margin-top:20px;padding:18px}
#stWhvModernDashboard>.whv-report-actions{display:flex;justify-content:center;gap:12px;margin:20px 0 8px;padding:0}
#stWhvModernDashboard>.whv-report-actions .btn{width:100%;max-width:360px;min-height:48px!important;padding:12px 18px}
#whvView .whv-report-controls{gap:16px}
#whvView .whv-report-controls label{gap:8px;line-height:1.45}
#whvView .whv-work-month{margin:16px 0;line-height:1.4}
#whvView .whv-work-month:last-child{margin-bottom:0}
/* Grids must respond to available content width, including the desktop sidebar. */
#settingsView .travel-settings-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))!important;gap:16px!important}
#settingsView .travel-settings-grid>.field{grid-column:auto!important}
#settingsView .travel-settings-grid>.full{grid-column:1/-1!important}
#settingsView :is(.settings-toolbar,.calendar-manage-actions){grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))!important;gap:12px}
#settingsView :is(.settings-toolbar,.calendar-manage-actions) .btn{white-space:normal!important;padding:10px 12px!important;line-height:1.4!important;font-size:.875rem!important}
#reportsView .expense-filter-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:14px}
#reportsView :is(.v52-area-header,.export-history-head){flex-wrap:wrap;gap:12px}
#reportsView :is(.v52-area-header,.export-history-head)>*{min-width:0;max-width:100%}
#assetsView .asset-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
#assetsView .asset-form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px}
#assetsView .asset-form-grid .full{grid-column:1/-1}
#assetsView .asset-form-grid>.btn{margin-top:4px}
#assetsView :is(.asset-row,.asset-actions){gap:12px;min-width:0}
#calendarView .calendar-toolbar{gap:8px;flex-wrap:wrap}
#calendarView .calendar-toolbar .btn{min-width:44px}
#chatView :is(#chatNewBtn,#chatRefreshBtn){min-height:44px!important}
:is(.view,.modal,.v51-modal,.st-whv-modal) a:not(.btn){text-underline-offset:3px;overflow-wrap:anywhere}
:is(.view,.modal,.v51-modal,.st-whv-modal) :is(input,select,textarea,button,a):focus-visible{outline:2px solid var(--primary-2,var(--primary));outline-offset:3px}
@media(max-width:760px){
  :is(.view,.modal,.v51-modal,.st-whv-modal,.auth-panel) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px!important}
  :is(.view,.modal,.v51-modal,.st-whv-modal) :is(.form-grid,.asset-form-grid){column-gap:12px;row-gap:16px}
  .st-whv-modal:not(.whv-swing-modal) .st-whv-form-actions .btn{flex:1 1 130px}
  #stWhvModernDashboard>.whv-report-actions .btn{max-width:100%}
  #entryModal .modal-actions .btn{font-size:.875rem!important;line-height:1.4!important;white-space:normal!important;min-height:44px!important}
}
@media(max-width:380px){
  #v51ExpenseForm .expense-save-actions .btn{flex-basis:100%}
  #settingsView :is(.settings-toolbar,.calendar-manage-actions){grid-template-columns:minmax(0,1fr)!important}
  #settingsView :is(.settings-toolbar,.calendar-manage-actions)>*{grid-column:auto!important}
  #whvSwingReviewForm .st-whv-form-actions{grid-template-columns:minmax(0,1fr)}
}
#reportsView #expenseReportsSection{grid-template-columns:minmax(0,1fr)}
#reportsView #expenseReportsSection>*{min-width:0;max-width:100%}
#reportsView #expenseReportsSection :is(.section-heading,.export-history-header){flex-wrap:wrap;gap:12px}
:is(.overview-collapse-btn,.overview-link){min-height:44px!important;padding:10px 12px!important;white-space:normal;line-height:1.4}
/* Roster actions sit outside the scrolling fields, never over them. */
#entryModal>.modal{display:flex;flex-direction:column;overflow:hidden;max-height:calc(100dvh - 20px)}
#entryModal .modal-header{flex:0 0 auto}
#entryForm{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
#entryForm>.form-grid{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:16px;padding:4px 3px 16px;margin:0}
#entryModal #entryForm>.modal-actions{position:static!important;flex:0 0 auto;margin:0!important;padding:12px 0 0!important;border-top:1px solid var(--border);background:var(--surface);bottom:auto!important}
:is(.section-card-head,.settings-panel-head,.v52-area-header,.receipt-items-head){flex-wrap:wrap;gap:12px;align-items:flex-start}
:is(.section-card-head,.settings-panel-head,.v52-area-header,.receipt-items-head)>div:first-child{flex:1 1 220px;min-width:0}
:is(.section-card-head,.settings-panel-head,.v52-area-header,.receipt-items-head)>.btn{flex:0 0 auto;max-width:100%;overflow-wrap:normal}
.credential-modal .credential-scan-actions{display:flex;flex-wrap:wrap;gap:10px}
.credential-modal .credential-scan-actions .btn{flex:1 1 140px;min-width:0;overflow-wrap:normal;word-break:normal}
#authGateway .auth-password-toggle{width:44px;height:44px;right:4px;min-height:44px}
#authGateway .auth-input-shell:has(.auth-password-toggle) input{padding-right:54px!important}
#authGateway :is(#forgotPasswordBtn,.st-guest-account-link){min-height:44px!important;line-height:1.4!important;white-space:normal!important}
@media(max-width:760px){
  .topbar .brand{flex:1;min-width:0}
  .topbar .top-actions{flex:0 0 auto;gap:6px}
  .topbar .brand-title{white-space:normal;overflow-wrap:normal}
}
@media(max-width:380px){
  .topbar{gap:6px;padding-inline:8px}
  .topbar .brand-home{gap:6px}
  .topbar .brand-home .logo{width:30px;height:30px;flex:0 0 30px}
  .topbar .brand-title{font-size:.8125rem;line-height:1.2}
  .topbar .top-actions{gap:4px}
}
#entryModal #entryForm>.modal-actions{padding-bottom:12px!important}
#whvView .whv-report-controls [data-report-custom]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:620px){#whvView .whv-report-controls [data-report-custom]{grid-template-columns:minmax(0,1fr)}}
/* Employment profiles: employer + role + rates remain readable on mobile and desktop. */
#settingsView .payroll-settings-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px;align-items:stretch}
#settingsView .payroll-settings-actions .btn{width:100%;min-width:0}
#entryModal #entryEmployerField,#entryModal #entryRoleField{align-self:start}
#entryModal #entrySiteOperatorHint{display:block;margin-top:4px;line-height:1.45}
.st-employment-profile-list{display:grid;gap:14px;margin-top:16px}
.st-employment-profile-card{margin:0!important}
.st-employment-profile-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.st-employment-profile-head>div{min-width:0;flex:1 1 180px}
.st-employment-profile-head p{margin:4px 0 0;overflow-wrap:anywhere}
.st-employment-default-check{display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:10px!important}
.st-employment-default-check input{flex:0 0 auto;margin-top:3px}
@media(max-width:620px){
  #settingsView .payroll-settings-actions{grid-template-columns:minmax(0,1fr)}
  .st-employment-profile-card .st-whv-form-actions{display:grid;grid-template-columns:minmax(0,1fr)}
  .st-employment-profile-card .st-whv-form-actions .btn{width:100%}
}