/* Phone workflows load after the desktop density rules. */
.phone-filter-toggle,.phone-module-select,.phone-card-sections,.phone-organizer-toggle{display:none}
@media(max-width:720px){
  #app .layout.os-layout-v10{--topbar:calc(56px + env(safe-area-inset-top));--workspace-tabs-height:44px;--shell-chrome-height:calc(100px + env(safe-area-inset-top));--control-height:44px}
  #app .layout.os-layout-v10 .topbar{height:var(--topbar);min-height:var(--topbar);grid-template-columns:44px 66px minmax(0,1fr) 44px;padding:calc(6px + env(safe-area-inset-top)) 8px 6px;gap:5px}
  #app .layout.os-layout-v10 .topbar .master-refresh{display:none}
  #app .layout.os-layout-v10 .topbar :is(.mobile-menu,.mobile-controls-toggle,.mobile-topbar-brand,.search-wrap,.global-search){height:44px;min-height:44px}
  #app .layout.os-layout-v10 .topbar :is(.mobile-menu,.mobile-controls-toggle){width:44px;min-width:44px}
  #app .layout.os-layout-v10 .mobile-topbar-brand,#app .layout.os-layout-v10 .mobile-topbar-logo{width:66px}
  #app .layout.os-layout-v10 .global-search{font-size:16px;padding-left:30px}
  #app .layout.os-layout-v10 .workspace-tabs{height:44px;min-height:44px}
  #app .layout.os-layout-v10 :is(.workspace-tab-group,.workspace-tab,.workspace-tab-close){height:38px;min-height:38px}
  #app .layout.os-layout-v10 .workspace-tab-close{width:38px;min-width:38px}
  #app .layout.os-layout-v10 .task-work-dock{display:none!important}
  #app .layout.os-layout-v10 .content{padding:10px 10px calc(86px + env(safe-area-inset-bottom));max-width:100%}
  #app .layout.os-layout-v10 .page-header{min-height:60px;height:auto;padding:10px;margin-bottom:10px;gap:8px}
  #app .layout.os-layout-v10 .page-header h1{font-size:21px;line-height:1.2}
  #app .layout.os-layout-v10 .page-header .page-actions{max-width:100%;width:auto;flex-wrap:wrap}
  #app .layout.os-layout-v10 :is(.btn,.filter-select,.search-input,.accounting-periods button){min-height:44px;height:auto;font-size:13px}
  #app .layout.os-layout-v10 :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px;max-width:100%;box-sizing:border-box}
  #app .layout.os-layout-v10 .refined-toolbar{display:flex;flex-wrap:wrap;padding:10px;gap:10px}
  #app .layout.os-layout-v10 .refined-toolbar .toolbar-search{width:100%;flex:1 0 100%}
  #app .layout.os-layout-v10 .phone-filter-toggle{display:flex;justify-content:center;width:100%;order:1}
  #app .layout.os-layout-v10 .refined-toolbar .refined-filters{display:none!important}
  #app .layout.os-layout-v10 .refined-toolbar.phone-filters-open .refined-filters{display:flex!important;flex-wrap:wrap;gap:10px;order:2;width:100%;overflow:visible;max-height:none}
  #app .layout.os-layout-v10 .refined-filters>.filter-select{flex:1 1 140px;width:auto;min-width:0}
  #app .layout.os-layout-v10 .date-range-filter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);flex:1 0 100%;width:100%;min-width:0;max-width:100%;padding:0;gap:8px;overflow:visible;border:0;border-radius:0;white-space:normal}
  #app .layout.os-layout-v10 .date-range-filter :is(input,select){width:100%;min-width:0;max-width:100%;margin:0}
  #app .layout.os-layout-v10 .date-range-filter b{display:none}
  #app .layout.os-layout-v10 .phone-module-select{display:grid;gap:6px;padding:10px;margin:0 0 10px;background:var(--panel,#fff);border:1px solid var(--line,#dce4ef);border-radius:10px;font-size:12px}
  #app .layout.os-layout-v10 .phone-module-select select{width:100%;min-height:44px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px}
  #app .layout.os-layout-v10 :is(.hr-section-tabs,.accounting-redesign .accounting-sections){display:none}
  #app .layout.os-layout-v10 .page-header [data-phone-section-button]{display:none}
  #app .layout.os-layout-v10 .hr-section-context{padding:8px 0;margin-bottom:10px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
  #app .layout.os-layout-v10 .hr-section-context span{display:none}
  #app .layout.os-layout-v10 .accounting-command-header{padding:14px}
  #app .layout.os-layout-v10 .accounting-command-header p{display:none}
  #app .layout.os-layout-v10 .accounting-command-header h1{font-size:22px}
  #app .layout.os-layout-v10 .accounting-command-header .row-actions{gap:8px;flex-wrap:wrap}
  #app .layout.os-layout-v10 .accounting-datebar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  #app .layout.os-layout-v10 .accounting-periods{grid-column:1/-1;display:flex;justify-content:space-between}
  #app .layout.os-layout-v10 .accounting-datebar label{display:grid;gap:5px;min-width:0}
  #app .layout.os-layout-v10 .accounting-datebar input{width:100%;max-width:100%;min-width:0;min-height:44px}
  #app .layout.os-layout-v10 .mobile-card-table .mobile-record-card{height:auto;max-height:none;padding:12px;gap:12px;border-radius:12px}
  #app .layout.os-layout-v10 .mobile-card-table .mobile-record-card>td{height:auto!important;min-height:0;max-height:none;overflow:visible;padding:0!important;font-size:14px;line-height:1.4;gap:5px}
  #app .layout.os-layout-v10 .mobile-card-table .mobile-record-card>td::before{position:static;height:auto;max-height:none;display:block;font-size:11px;line-height:1.3;white-space:normal}
  #app .layout.os-layout-v10 .mobile-card-table .mobile-primary-cell{padding-right:44px!important}
  #app .layout.os-layout-v10 .mobile-card-table .mobile-primary-cell .row-title :is(strong,span){white-space:normal;line-height:1.4;height:auto;max-height:none}
  #app .layout.os-layout-v10 .mobile-card-table .mobile-primary-cell .row-title strong{font-size:16px}
  #app .layout.os-layout-v10 .mobile-card-table .select-col{width:40px;min-height:40px;display:grid;place-items:center}
  #app .layout.os-layout-v10 .mobile-card-table .mobile-record-card>.select-col::before{display:none}
  #app .layout.os-layout-v10 .mobile-card-table .row-action-cell{grid-column:1/-1;padding-top:8px!important}
  #app .layout.os-layout-v10 .mobile-card-table .row-actions .btn{min-height:44px;height:44px;min-width:44px}
  #app .layout.os-layout-v10 .mobile-card-table .record-grid-row-number{display:none}
  #app .layout.os-layout-v10 .page-header .page-actions .btn{width:auto;max-width:none;white-space:nowrap;flex:0 0 auto;padding:10px 12px}
  #app .layout.os-layout-v10 .mobile-card-table .mobile-record-card>.select-col{position:absolute;right:10px;top:10px;background:transparent;box-shadow:none}
  #app .layout.os-layout-v10 .task-board-organizer{padding:10px;display:block}
  #app .layout.os-layout-v10 .phone-organizer-toggle{display:flex;width:100%;justify-content:space-between}
  #app .layout.os-layout-v10 .task-board-organizer:not(.phone-organizer-open)>:not(.phone-organizer-toggle){display:none}
  #app .layout.os-layout-v10 .task-board-organizer.phone-organizer-open{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  #app .layout.os-layout-v10 .phone-organizer-toggle{grid-column:1/-1}
  dialog.hr-employee-card[open]{display:flex;flex-direction:column;position:fixed;inset:0;margin:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0;overflow:hidden}
  dialog.hr-employee-card .hr-card-header{flex-shrink:0;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;gap:12px;align-items:flex-start}
  dialog.hr-employee-card .hr-card-header h2{font-size:21px;margin:5px 0;overflow-wrap:anywhere}
  dialog.hr-employee-card .hr-card-header>.btn{min-width:68px;white-space:nowrap}
  dialog.hr-employee-card .hr-card-tabs{flex-shrink:0;padding:10px 16px;overflow:visible}
  dialog.hr-employee-card .hr-card-tabs>button{display:none}
  dialog.hr-employee-card .phone-card-sections{display:grid;gap:5px;width:100%;font-size:12px}
  dialog.hr-employee-card .hr-card-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
  dialog.hr-employee-card .hr-card-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  dialog.hr-employee-card :is(input:not([type=checkbox]):not([type=radio]),select,textarea){width:100%;font-size:16px;min-height:44px}
  dialog.hr-employee-card .btn{min-height:44px;font-size:14px}
  dialog.hr-employee-card .hr-card-status:empty{display:none}
  dialog.hr-employee-card .hr-card-grid>section{padding:14px}
  dialog.hr-employee-card .hr-card-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  dialog.hr-employee-card .hr-card-facts dd{font-size:14px}
}
@media(max-width:720px){
  /* Desktop sticky subtotal cells must not float over phone selection controls. */
  #app .layout.os-layout-v10 .mobile-card-table .record-subtotals,
  #app .layout.os-layout-v10 .mobile-card-table .record-subtotals :is(tr,td,th){position:static!important;inset:auto!important;transform:none!important;z-index:auto!important}
  #app .layout.os-layout-v10 .mobile-card-table .record-subtotals :is(.select-col,.record-grid-row-number,td:empty){display:none!important}
  #app .layout.os-layout-v10 .mobile-card-table .mobile-record-card>:is(.mobile-primary-cell,.mobile-data-cell){position:static!important;inset:auto!important;z-index:auto!important}
}

/* Board/List is a view choice, not a module-section button. Keep both available. */
.record-view-switch{display:contents}
@media(max-width:720px){
  #app .layout.os-layout-v10 .page-header:has(.record-view-switch){display:grid;grid-template-columns:minmax(0,1fr) auto;height:auto;max-height:none;gap:10px}
  #app .layout.os-layout-v10 .page-header:has(.record-view-switch) .page-actions{display:contents}
  #app .layout.os-layout-v10 .page-header:has(.record-view-switch) .page-actions>.btn-primary[data-action=quick-create]{grid-column:2;grid-row:1}
  #app .layout.os-layout-v10 .record-view-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;grid-column:1/-1;grid-row:2;width:100%;padding:4px;background:var(--surface-2,#eef3fa);border-radius:10px}
  #app .layout.os-layout-v10 .page-header .record-view-switch>.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;width:100%;padding:8px 12px;white-space:nowrap}
  #app .layout.os-layout-v10 .task-view-switch button{min-height:44px;flex-shrink:0}
}