.mobile-table-hint {display:none}
/* Mobile workspace layout. Keep desktop sizing and business rules unchanged. */
@media (max-width:980px) {
  html {scroll-padding-top:calc(var(--erp-mobile-header,58px) + 12px)}
  html body main .view {min-width:0!important}
  html body main .view :is(.panel,.pc-panel,.hr-hero,.ua-header,.inventory-hero) {box-sizing:border-box!important;min-width:0!important}
  /* A module header must not inherit the fixed app-toolbar layout. */
  html body main .view header:not(.topbar) {
    position:static!important;inset:auto!important;width:auto!important;height:auto!important;
    min-height:0!important;padding:0!important;margin:0 0 16px!important;
    background:transparent!important;box-shadow:none!important;display:flex!important;
    flex-wrap:wrap!important;gap:12px!important;grid-template-columns:none!important;
  }
  html body main .view :is(.page-head,.ua-header,.pc-head,.pc-intro,.panel-head,.inventory-hero)>div {min-width:0!important;max-width:100%!important}
  html body main .view :is(h1,h2,h3,p,small,.tag,.pc-badge,.ua-muted) {overflow-wrap:break-word;word-break:normal}
  html body main .view .contract-strip {margin-inline:0!important;width:auto!important;max-width:100%!important}
  html body main .view :is(.inventory-nav,.qh-tabs,.finance-tabs,.logistics-tabs,.contract-module-tabs,.contract-inner-tabs,.hr-tabs,.ua-tabs,.cs-categories,.pc-reference-tabs) {
    display:flex!important;flex-wrap:nowrap!important;gap:8px!important;min-width:0!important;
    max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;
    padding-block:8px!important;overscroll-behavior-x:contain;scroll-padding-inline:8px;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;
  }
  html body main .view :is(.inventory-nav,.qh-tabs,.finance-tabs,.logistics-tabs,.contract-module-tabs,.contract-inner-tabs,.hr-tabs,.ua-tabs,.cs-categories,.pc-reference-tabs)>button {
    flex:0 0 auto!important;min-width:max-content!important;width:auto!important;
    white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important;
    min-height:44px!important;max-height:none!important;padding:10px 14px!important;
  }
  html body main .view :is(.inventory-hero-actions,.cs-heading .actions,.hr-actions,.ua-actions,.pc-actions,.form-actions) {
    display:flex!important;flex-wrap:wrap!important;gap:8px!important;min-width:0!important;max-width:100%!important;
  }
  html body main .view :is(.inventory-hero-actions,.cs-heading .actions,.hr-actions,.ua-actions,.pc-actions)>button {
    flex:0 1 auto!important;max-width:100%!important;width:auto!important;
    white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important;
    padding:10px 12px!important;min-height:44px!important;
  }
  html body #hr-payables-quick {position:static!important;inset:auto!important;margin-top:12px!important;max-width:100%!important}
  html body main .view :is(.flow,.process-flow,.finance-flow,.stage-row,.workflow,.pc-flow) {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  html body main .view .stage {min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  html body main .view :is(.ua-simple-fields,.pc-form,.pc-filter,.pc-details,.hr-form,.req-form,.qh-fields,.sc-fields) {grid-template-columns:minmax(0,1fr)!important}
  html body :is(.ua-simple-fields,.pc-form,.pc-filter,.pc-details,.hr-form,.req-form,.qh-fields,.sc-fields)>* {min-width:0!important;max-width:100%!important;grid-column:auto!important}
  html body main .view :is(.pc-chart-grid,.pc-insights) {grid-template-columns:minmax(0,1fr)!important}
  html body main .view :is(.chart,.bar-chart,.chart-bars,.pc-trend) {min-width:0!important;max-width:100%!important;overflow-x:auto!important;overscroll-behavior-x:contain}
  html body .mobile-table-region {display:block!important;min-width:0!important;width:100%!important;max-width:100%!important;overflow:auto!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  html body .mobile-table-region:focus-visible {outline:2px solid #ff7a22;outline-offset:3px}
  html body .mobile-table-region table:not(.portal-table) {display:table!important;min-width:100%!important;width:max-content!important;max-width:none!important;table-layout:auto!important;overflow:visible!important}
  html body .mobile-table-region :is(th,td) {vertical-align:top;white-space:normal;word-break:normal;overflow-wrap:break-word;max-width:260px}
  html body .mobile-table-region th {white-space:nowrap!important}
  html body .mobile-table-region :is(input,select,textarea) {min-width:110px!important;box-sizing:border-box}
  .mobile-table-hint {display:block;display:block;color:#69788b;margin:8px 0;font-size:12px}
  .mobile-table-hint[hidden] {display:none!important}
  /* Keep scrolling and the close control inside the visible phone viewport. */
  html body :is(dialog,.sc-dialog,.qh-modal,.req-dialog,.pc-dialog,.ua-dialog):not(#erp-chat-panel) {
    box-sizing:border-box!important;width:calc(100% - 16px)!important;max-width:calc(100% - 16px)!important;
    margin:calc(var(--erp-mobile-header,58px) + 8px) auto 8px!important;
    max-height:calc(var(--erp-visible-height,100dvh) - var(--erp-mobile-header,58px) - 24px)!important;
    padding:16px!important;overflow:auto!important;overscroll-behavior:contain;
  }
  html body :is(.modal,.history-box,.hr-modal-card,.profile-card,.rate-modal-box,.bd-report-modal) {
    max-height:calc(var(--erp-visible-height,100dvh) - var(--erp-mobile-header,58px) - 24px)!important;
    min-width:0!important;overflow:auto!important;overscroll-behavior:contain;
  }
  html body :is(dialog,.modal,.history-box,.hr-modal-card) :is(.ua-header,.pc-modal-head,.modal-head,.hr-modal-head,header) {
    position:sticky!important;inset:auto!important;top:-16px!important;
    width:auto!important;min-height:44px!important;max-width:100%!important;
    padding:8px 0!important;background:var(--surface,#fffdfb)!important;z-index:3!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;
  }
  html body :is(dialog,.modal,.history-box,.hr-modal-card) :is(h2,h3) {min-width:0;overflow-wrap:break-word}
  html body :is(dialog,.modal,.history-box,.hr-modal-card) :is([data-close],.close,.modal-close,[data-popup-close-icon]) {flex:0 0 44px!important;width:44px!important;min-height:44px!important}
  html body .ua.ua-dialog .ua-module-grid {grid-template-columns:minmax(0,1fr)!important}
  html body .ua.ua-dialog .ua-radio-options label {min-height:36px;white-space:nowrap!important}
  html body .ua.ua-dialog :is(input[type=checkbox],input[type=radio]) {width:20px!important;height:20px!important;max-width:20px!important;min-width:20px!important;max-height:20px!important;min-height:20px!important}
  html body #erp-chat #erp-chat-panel {
    left:8px!important;right:8px!important;top:auto!important;
    bottom:calc(var(--erp-keyboard-bottom,0px) + 8px + env(safe-area-inset-bottom))!important;
    width:calc(100% - 16px)!important;max-width:calc(100% - 16px)!important;
    margin:0!important;padding:0!important;
    max-height:calc(var(--erp-visible-height,100dvh) - var(--erp-mobile-header,58px) - 24px)!important;
  }
  html body #erp-chat .chat-head {position:static!important;top:auto!important;padding:10px!important}
  html body #erp-chat :is(.chat-head,.chat-tabs) button {min-height:44px!important;height:auto!important}
  html body #erp-chat .chat-peer {flex-wrap:wrap;min-width:0}
  html body #erp-chat .chat-compose {flex-shrink:0;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  html body #erp-chat .chat-audit-filters {grid-template-columns:minmax(0,1fr)}
  html body #view-build-tracker :is(.bt-stats,.build-stats,.tracker-stats) {grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:360px) {
  html body main .view :is(.kpis,.meal-summary,.pc-cards,.academy-stats,.hr-summary,.mini-metrics,.pc-flow) {grid-template-columns:minmax(0,1fr)!important}
}
@media(prefers-reduced-motion:reduce) {
  html body .mobile-table-region {scroll-behavior:auto!important}
}
@media(max-width:980px){
 html body main .view header:not(.topbar), html body main .view header:not(.topbar) :is(h1,h2,p,div){white-space:normal!important;overflow:visible!important}
 html body :is(dialog,.modal) header{white-space:normal!important;overflow:visible!important;min-width:0!important;max-width:100%!important;width:auto!important}
 html body :is(dialog,.modal) header :is(h1,h2,h3,div){white-space:normal!important;min-width:0!important;overflow-wrap:break-word!important}
 html body :is(dialog,.modal) header button{flex:0 0 auto!important;white-space:nowrap!important}
}
@media(max-width:980px){
 html body .bar-chart{justify-content:flex-start!important;gap:20px!important;overflow-x:auto!important;max-width:100%!important}
 html body .bar-chart .bar-group{flex:0 0 48px!important;min-width:48px!important}
 html body.embedded nav{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:8px!important;max-width:100%!important}
 html body.embedded nav button{flex:0 0 auto!important;white-space:nowrap!important;min-height:44px!important;padding:10px 12px!important}
 html body.embedded .actions{display:flex!important;flex-wrap:wrap!important;gap:10px!important;min-width:0!important}
 html body.embedded .actions button{max-width:100%!important;white-space:normal!important;overflow-wrap:break-word!important;min-height:44px!important}
 html body.embedded :is(.scroll,.card,#workspace){min-width:0!important;max-width:100%!important}
 html body.embedded .tea-sheet{max-width:none!important}
}
/* Dedicated phone layouts for Logistics / Facility and Finance / Accounts. */
.mobile-module-picker {display:none}
@media(max-width:700px){
 html body :is(#view-finance,#view-logistics) .mobile-module-picker{display:block!important;margin:16px 0!important;min-width:0!important}
 html body .mobile-module-picker span{display:block;margin-bottom:7px;font-weight:700}
 html body .mobile-module-picker select{width:100%!important;max-width:100%!important;min-height:44px!important;padding:10px 12px!important;border:1px solid #ff7b24!important;border-radius:10px!important;background:var(--surface,#fffdfb);color:inherit;font:inherit;box-sizing:border-box}
 html body :is(#view-finance,#view-logistics) .mobile-module-tabs{display:none!important}
 html body :is(#view-finance,#view-logistics) .mobile-table-region:has(.mobile-record-cards){overflow:visible!important}
 html body :is(#view-finance,#view-logistics) .mobile-table-hint:has(+ .mobile-table-region .mobile-record-cards){display:none!important}
 html body :is(#view-finance,#view-logistics) table.mobile-record-cards{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important}
 html body :is(#view-finance,#view-logistics) table.mobile-record-cards thead{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)}
 html body :is(#view-finance,#view-logistics) table.mobile-record-cards tbody{display:block!important;width:100%!important}
 html body :is(#view-finance,#view-logistics) table.mobile-record-cards tbody tr{display:block!important;margin:0 0 12px!important;padding:12px!important;border:1px solid #efd5c2!important;border-radius:10px!important;background:var(--surface,#fffdfb);box-sizing:border-box!important}
 html body :is(#view-finance,#view-logistics) table.mobile-record-cards tbody td{display:grid!important;grid-template-columns:minmax(0,42%) minmax(0,1fr)!important;gap:8px!important;align-items:start!important;padding:8px 0!important;border:0!important;border-bottom:1px solid #eee3da!important;width:auto!important;max-width:none!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:left!important}
 html body :is(#view-finance,#view-logistics) table.mobile-record-cards tbody td::before{content:attr(data-mobile-label);font-weight:700;color:inherit}
 html body :is(#view-finance,#view-logistics) table.mobile-record-cards tbody td:last-child{border-bottom:0!important}
 html body :is(#view-finance,#view-logistics) table.mobile-record-cards tbody td[colspan]{display:block!important}
 html body :is(#view-finance,#view-logistics) table.mobile-record-cards tbody td[colspan]::before{display:none}
 html body :is(#view-finance,#view-logistics) :is(.panel-head,.page-head){min-width:0!important;flex-wrap:wrap!important;gap:12px!important}
 html body :is(#view-finance,#view-logistics) :is(.panel-head,.page-head) button{max-width:100%!important;min-height:44px!important;white-space:normal!important;word-break:normal!important}
 html body #view-finance .workflow{grid-template-columns:minmax(0,1fr)!important}
 html body #view-finance .workflow .stage{width:100%!important}
 html body .history-box .panel-head{position:sticky!important;top:-16px!important;z-index:3!important;background:var(--surface,#fffdfb);padding:8px 0!important;min-width:0!important;display:flex!important;gap:12px!important;align-items:center!important}
 html body .history-box .panel-head h2{min-width:0!important;flex:1!important}
 html body .history-box .panel-head [data-close]{flex:0 0 auto!important;min-height:44px!important}
}
@media(max-width:700px){html body .mobile-record-value{min-width:0!important;max-width:100%!important}html body .mobile-record-value button{min-height:44px!important;margin:3px 4px 3px 0!important;white-space:normal!important}}
/* Keep module actions in predictable rows on phones and tablets. */
@media(max-width:980px){
 html body :is(#view-finance,#view-logistics) :is(.page-head,.panel-head){display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important}
 html body :is(#view-finance,#view-logistics) :is(.page-actions,.mobile-control-actions){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important;margin:0!important;min-width:0!important}
 html body :is(#view-finance,#view-logistics) :is(.page-actions,.mobile-control-actions)>button{width:100%!important;min-width:0!important;max-width:100%!important;min-height:44px!important;margin:0!important;padding:10px 12px!important;white-space:normal!important;line-height:1.3!important;border:1px solid #ff7a22!important;box-sizing:border-box!important}
 html body :is(#view-finance,#view-logistics) :is(.page-actions,.mobile-control-actions)>button.primary{grid-column:1 / -1!important}
 html body :is(#view-finance,#view-logistics) :is(.page-head,.panel-head)>button{width:100%!important;margin:0!important;min-height:44px!important}
 html body :is(#view-finance,#view-logistics) .mobile-record-value:has(button){display:flex!important;flex-wrap:wrap!important;gap:8px!important}
 html body :is(#view-finance,#view-logistics) .mobile-record-value>button{flex:1 1 100px!important;margin:0!important;min-height:44px!important;border:1px solid #ff7a22!important}
}

@media(max-width:980px){html body :is(#view-finance,#view-logistics) .page-actions>button:nth-last-child(2):nth-child(odd){grid-column:1 / -1!important}html body :is(#view-finance,#view-logistics) .grid-even{grid-template-columns:minmax(0,1fr)!important}}
