/* Project-wide phone and small-tablet interaction layer. */
@media (max-width: 720px){
 html,body{width:100%;max-width:100%;overflow-x:hidden}
 body{font-family:Tahoma,Arial,sans-serif;-webkit-text-size-adjust:100%}
 button,input,select,textarea{max-width:100%}
 input,select,textarea{font-size:14px!important}
 button{touch-action:manipulation}

 /* Keep every workspace reachable on a phone. */
 .dashboardShell{display:block!important;min-height:100vh}
 .dashboardNav{position:sticky!important;top:0;z-index:1000;width:100%;height:auto!important;display:block!important;padding:8px 10px!important;overflow:visible;background:#2c1b14}
 .dashboardIdentity{display:flex!important;justify-content:flex-start!important;padding:3px 4px 8px!important;border-bottom:1px solid #ffffff1a!important}
 .dashboardIdentity div{display:block!important}.dashboardIdentity .brandmark{width:32px;height:32px;font-size:19px}
 .dashboardIdentity b{font-size:12px}.dashboardIdentity small{font-size:9px}
 .dashboardNav nav{display:flex!important;align-items:stretch;gap:6px;width:100%;margin:0!important;padding:6px 0 3px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scroll-snap-type:x proximity}
 .dashboardNav .navLabel,.dashboardNav .navStatus{display:none!important}
 .dashboardNav .moduleButton,.dashboardNav .moduleButton:not(.active){display:flex!important;flex:0 0 auto!important;width:auto!important;min-width:112px;min-height:48px;margin:0!important;padding:7px 9px!important;justify-content:flex-start!important;scroll-snap-align:start}
 .dashboardNav .moduleButton>span:last-child,.dashboardNav .moduleButton:not(.active)>span:last-child{display:block!important}
 .dashboardNav .moduleButton .moduleIcon{width:27px;height:27px}.dashboardNav .moduleButton b{font-size:10px}.dashboardNav .moduleButton small{display:none!important}
 .dashboardNav .navSubmodules{display:flex!important;gap:6px}.dashboardNav .navSubmodules[hidden]{display:none!important}
 .dashboardNav .qcProductGroup,.dashboardNav #adminNavigationGroup,.dashboardNav #caNavigationGroup{display:flex;flex:0 0 auto;gap:6px}

 .dashboardMain{width:100%;min-width:0;padding:10px 8px 22px!important;overflow:visible!important}
 .dashboardHeader{min-height:0!important;padding:6px 4px 12px!important}.dashboardHeader h1{font-size:20px!important}
 .modulePane,.qualityControlModule,.biomasModule,.npdModule,.caManagementModule,.rightsModule,.poolsModule,.productionModule,.repositoryModule{width:100%!important;max-width:100%!important;margin:0!important;border-radius:9px!important}

 /* Forms and action areas become a readable single column. */
 .fields,.autogrid,.reportInputs,.bioFormGrid,.bioRegisterEditorGrid,.bioDirectGrid,.bioRecordDialog .bioFormGrid,.caFormGrid,.caMetadataGrid,.carMetadataGrid,.closureResponseGrid,.finalApprovalGrid,.npdFormGrid,.manualFields,.adminPasswordResetPanel form,.selfPasswordPanel form{grid-template-columns:1fr!important}
 .field.wide,.wideInput,.bioField.wide,.bioRegisterEditorGrid .wide{grid-column:1!important}
 .fields,.bioForm,.bioDialogBody,.caFormBody{padding:14px!important}.field textarea,.bioField textarea{min-height:100px}
 .formactions,.bioFormFoot,.modalActions,.bioDialog footer,.stagingLedger>footer,.caDialog footer{display:flex!important;flex-wrap:wrap;gap:8px;padding:12px!important}
 .formactions button,.bioFormFoot button,.modalActions button,.bioDialog footer button,.caDialog footer button{flex:1 1 140px;min-height:42px}
 .sectiontitle,.recordhead,.bioWorkspaceBar,.bioRepositoryHead,.bioRegisterLevel>header,.caToolbar,.caPageHeader,.npdHeader{align-items:flex-start!important;flex-direction:column!important;gap:10px!important;padding:14px!important}
 .bioWorkspaceActions,.bioRepositoryActions,.caToolbarActions{width:100%;display:flex;flex-wrap:wrap;gap:7px}
 .bioWorkspaceActions button,.bioRepositoryActions button,.caToolbarActions button{flex:1 1 130px}

 /* Tables remain operable without forcing the entire page wider. */
 .tablewrap,.bioTableWrap,.bioRepositoryTable,.productionTableWrap,.repositoryTableWrap,.rightsTableWrap,.capabilityTableWrap,.caTableWrap,.npdTableWrap,.stagingTableWrap{display:block;width:100%;max-width:100%;overflow-x:auto!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 table,.bioTable,.recordsTable,.productionTable,.repositoryTable,.rightsTable,.capabilityTable,.caRegisterTable,.npdTable,.stagingTable{width:max-content!important;max-width:none!important}
 th,td{white-space:nowrap}.detailsCell,.repoDetails,.wrapCell{white-space:normal!important;min-width:210px}

 /* Dialogs use the phone viewport and keep their actions visible. */
 .modalBackdrop,.bioBackdrop,.stagingBackdrop,.caBackdrop,.manualProductionBackdrop{padding:6px!important;align-items:center!important}
 .reportModal,.bioDialog,.stagingLedger,.caDialog,.manualProductionBackdrop>section{width:calc(100vw - 12px)!important;max-width:none!important;max-height:calc(100dvh - 12px)!important;border-radius:10px!important}
 .bioDialogBody,.caDialogBody{max-height:calc(100dvh - 150px)!important;overflow:auto!important}
 .stagingLedger{height:calc(100dvh - 12px)!important}
 .modalHead,.bioDialog header,.caDialog header,.stagingLedger>header{padding:12px 14px!important}.modalHead h2,.bioDialog h2,.caDialog h2{font-size:18px!important}
 .summaryPreview{grid-template-columns:1fr 1fr!important}

 /* Biomas workspaces. */
 .bioRegisterShell,.bioRepositoryShell{margin:0!important;border-radius:9px!important}
 .bioRegisterWorkspace{grid-template-columns:1fr!important;gap:10px!important;padding:10px!important}
 .bioRegisterRail{position:static!important;padding:12px!important}.bioFamilyList{grid-template-columns:1fr!important}
 .bioRegisterLevel>header>div:last-child{width:100%;display:grid!important;grid-template-columns:1fr!important}.bioRegisterLevel>header button{width:100%}
 .bioHierarchyRows{padding:10px!important}.bioHierarchyRows article{min-height:48px}
 .bioKpis{grid-template-columns:1fr 1fr!important}.bioGrid{grid-template-columns:1fr!important}
 .bioRepositoryFilters{grid-template-columns:1fr 1fr!important}.bioSearch{width:100%;min-width:0!important}
 .bioOutputRow{grid-template-columns:1fr!important;gap:8px}.bioOutputRow input{width:100%!important}

 /* Dashboards and administration. */
 .qcFilters,.qcKpis,.qcGrid{grid-template-columns:1fr!important}.quality-control-active .qcGrid{display:grid!important;grid-template-columns:1fr!important;grid-template-areas:none!important}
 .roleCards,.capabilityRoleGrid,.adminWorkspaceGrid,.cloudAdminGrid,.orgSettingsGrid,.emailConfigGrid{grid-template-columns:1fr!important}
 .adminWorkspaceTabs,.rightsTabs{display:flex!important;width:100%;overflow-x:auto;gap:6px}.adminWorkspaceTabs button,.rightsTabs button{flex:0 0 auto;min-height:42px}
 .matrixTitle{align-items:flex-start!important;flex-direction:column!important;gap:10px}.matrixTitle button{width:100%}

 /* Login remains usable in portrait orientation. */
 .qaCloudLogin{padding:10px!important;overflow:auto}.qaCloudLoginShell{width:100%!important;min-height:0!important;grid-template-columns:1fr!important}
 .qaCloudBrand{display:none!important}.qaCloudCard{padding:22px 18px!important}.qaCloudCard form{width:100%!important}
}

@media (max-width: 420px){
 .dashboardNav .moduleButton,.dashboardNav .moduleButton:not(.active){min-width:98px;padding:6px 7px!important}
 .dashboardNav .moduleButton .moduleIcon{display:none!important}
 .bioKpis,.bioRepositoryFilters,.summaryPreview{grid-template-columns:1fr!important}
 .bioWorkspaceActions button,.bioRepositoryActions button,.caToolbarActions button{flex-basis:100%}
}