/* Shared screen layout. Reflow controls and content; pages scroll past summaries.
   Keep print/PDF canvases outside these rules. Never clip a financial value to fit. */
@media screen {
  #app,#body,.tab,.panel,.panel-body{min-width:0;min-height:0}
  .card,.field{min-width:0}
  .tab,.panel-body{container-type:inline-size;container-name:iskra-workspace}
  .tab>*,.form-grid>*,.module-head>*,.panel-header>*{min-width:0}
  .module-head,.panel-header,.panel-footer{flex-wrap:wrap}
  .module-head .mh-actions,.panel-footer{max-width:100%}
  .panel-header h3,.mh-title,.mh-sub{overflow-wrap:anywhere}
  .panel-close{flex:none;margin-left:auto}
  .panel-tabs{max-width:100%}
  .panel-tab{flex-shrink:0}
  .field input,.field select,.field textarea{max-width:100%}
  .form-grid{min-width:0}
  .search-bar input[type=text]{min-width:min(200px,100%);max-width:100%}
  .search-bar select{min-width:0;max-width:100%}
  .table-wrap{overflow-x:auto}
  /* A list scrolls with its summary cards in #content. A viewport-capped
     table traps the wheel below a tall dashboard and leaves only a few rows.
     Dialogs keep their independently bounded scrolling workspace. */
  #content>.tab{flex-shrink:0}
  #content>.tab .table-wrap:not(.panel-body .table-wrap):has(>table.colfilter-table),
  #content>.tab .table-wrap:has(>table>#ot-mrp-tbody),
  #content #vr-results .table-wrap:has(>table.colfilter-table),
  #content>.tab .fin-invoice-table{max-height:none!important}
  /* ColFilter headers move as one measured-by-layout group: labels, search fields,
     selects and optional totals. Individual sticky cells would cover the filter row.
     Keep horizontal scrolling on the existing table wrapper and print unaffected. */
  .table-wrap > table.colfilter-table > thead{position:sticky;top:0;z-index:3;background:var(--surface)}
  .table-wrap > table.colfilter-table > thead > tr > :is(th,td){position:static!important;top:auto!important}
  :is(.tab,.panel-body) :where(div,section):has(>table){min-width:0;max-width:100%;overflow-x:auto}
  .cc-dayplanner-layout{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
  .cc-dayplanner-layout>*{min-width:0}
  .fin-tabs{flex-wrap:wrap;max-width:100%}
  .fin-page :is(input,select,textarea){min-width:0;max-width:100%}
  .fa-reason{overflow-wrap:anywhere}
  .tab :is(input,select,textarea){max-width:100%}
  .card,.ds-card{overflow-wrap:anywhere}
  .te-export{display:inline-flex;flex-wrap:wrap;gap:4px;max-width:100%}
  #proc-body .vr-list-toolbar,#aw-root .tm-pills>div{flex-wrap:wrap;min-width:0;max-width:100%}
  .fb-list-page{min-width:0;grid-template-columns:minmax(0,1fr)}
  .fb-list-hero>div{min-width:0;overflow-wrap:anywhere}
  .fb-list-metrics{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
  .fb-list-metric>div{min-width:0;overflow-wrap:anywhere}
  #fm-func-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))!important}
  #company-profile-card :where(div){min-width:0;max-width:100%;overflow-wrap:anywhere}
  #email-inbox-root .eml-card :where(div){min-width:0;overflow-wrap:anywhere}

  .cm-board{min-width:0;grid-template-columns:minmax(0,1fr)}
  .cm-board>*{min-width:0}
  .cm-owner-head{flex-wrap:wrap}
  #cust-content .cust-toolbar{flex-wrap:wrap}
  #cust-content .cust-metric{min-width:0;overflow-wrap:anywhere}
  .otd-kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
  .otd-kpi-val{min-width:0;overflow-wrap:anywhere}
  .pr-page-head{flex-wrap:wrap}
  .pr-page-copy{overflow-wrap:anywhere}
  .pr-head-actions{flex-wrap:wrap;max-width:100%;min-width:0}
  .fm-workspace{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
  .fm-workspace>*{min-width:0}
  #lbl-preview{max-width:100%;overflow-x:auto}
  .pcal2 .pcal2-strip,.pcal2 .pcal2-strip>*{min-width:0;max-width:100%}
  .pcal2 .pcal2-metrics{grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr))}
  .pcal2 .pcal2-howto-key{white-space:normal}
  #tab-production-calendar .pcal2-hd b{max-width:100%;font-size:10px;padding-inline:1px;letter-spacing:-.025em}


  /* The search label is one line with an accessible full label on the button.
     Header actions keep their labels together instead of shrinking through them. */
  #header{height:auto;min-height:64px;padding-block:10px;gap:16px}
  #header .brand{min-width:0;flex-shrink:0}
  #header .brand-name{white-space:nowrap}
  #header .iskra-global-search{min-width:38px;flex:1 1 180px}
  #header .iskra-global-search>span:first-child,#header .iskra-global-search kbd{flex-shrink:0;white-space:nowrap}
  #header .iskra-global-search>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #header .user-info{min-width:0;flex-shrink:0;gap:8px}
  #header .user-info>button,#header .user-info>img{flex-shrink:0;white-space:nowrap}
  #header #user-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #header .brand-sub{margin-left:0}

  .tm-pill{white-space:nowrap;max-width:100%}
  .tm-quickbar{flex-wrap:wrap}
  .tm-quickbar input[type=text]{flex:1 1 220px;min-width:0}
  .tm-quickbar input,.tm-quickbar select{max-width:100%;min-width:0}
  .tm-airec-body{min-width:0;overflow-wrap:anywhere}
  .tm-section-head{flex-wrap:wrap;gap:8px}
  .tm-greeting-main{overflow-wrap:anywhere}
  .tm-banner{flex-wrap:wrap;gap:12px}
  .tm-banner>span{min-width:0;max-width:100%}
  .tm-banner>span:last-child,#tm-pills>div{flex-wrap:wrap}
  #tm-pills>div{max-width:100%}
  .inv-stock-intro{flex-wrap:wrap;gap:12px}
  .inv-stock-intro>div{min-width:0}
  .mfg-list-toolbar{grid-template-columns:minmax(0,1fr)}
  .mfg-list-toolbar>*{min-width:0}
  .mfg-legend{min-width:0;max-width:100%}
  .mfg-legend .mfg-lg{white-space:normal;max-width:100%}
  .mfg-legend>.mfg-legend{flex:1 1 100%;min-width:0}
  .mfg-search{min-width:min(220px,100%);max-width:100%}
  #rh-root .rh-shell{min-width:0}
  #rh-root .rh-topbar{max-width:100%;overflow-x:auto}
  #rh-root .rh-section>*{min-width:0}
  #rh-root .rh-card-top{flex-wrap:wrap}
  #rh-root .rh-vendor{min-width:0;overflow-wrap:anywhere}
  #rh-root .rh-sec-h{flex-wrap:wrap;gap:6px}
  #rh-root .rh-sec-h>*{min-width:0;overflow-wrap:anywhere}
  #bom-body .bom-workspace{min-width:0}
  #bom-body .bom-list-tabs,#bom-body .bom-detail-tabs{width:100%;max-width:100%;min-width:0}

  @container iskra-workspace (max-width:720px){
    .fm-workspace{grid-template-columns:minmax(0,1fr)}
    .form-grid.g3,.form-grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
    .form-grid:is(.g3,.g4)>[style*="grid-column"]:not([style*="span 2"]):not([style*="span2"]){grid-column:1/-1!important}
  }
  @container iskra-workspace (max-width:480px){
    .form-grid.g2,.form-grid.g3,.form-grid.g4{grid-template-columns:minmax(0,1fr)}
    .form-grid.g2>*,.form-grid.g3>*,.form-grid.g4>*{grid-column:1/-1!important}
  }
  @media(max-width:1100px){
    #header .brand-sub,#header #user-name{display:none}
    #header{padding-inline:16px;gap:12px}
  }
  @media(max-width:900px){
    #header .build-stamp,#header .smoke-badge,#header .refresh-data-status{display:none}
    #header .user-info{gap:6px}
  }
  /* Reuse the existing permission-filtered group bar and sub-tabs on narrow
     windows. The legacy mobile display rule preceded a later display:none. */
  @media(max-width:640px), (hover:none) and (pointer:coarse){
    #body{flex-direction:column}
    #body>#m4topnav{display:flex;width:100%;flex:0 0 auto;padding:0;border-right:0}
    #m4topnav #m4-iconbar,#m4topnav #m4-quick-access{display:none}
    #m4topnav #m4-subtabs{flex-direction:row;gap:4px;overflow-x:auto;max-width:100%;padding:6px 8px;min-height:44px}
    #m4topnav .m4-sub{flex:0 0 auto;padding:7px 10px}
    #mobile-nav{display:flex}
  }
  @media(max-width:480px){
    #header{padding-inline:10px;gap:8px}
    #header .brand-name{display:none}
    #header .iskra-global-search{flex:1 1 38px}
    .panel{max-width:100vw}
    .panel-header,.panel-footer{padding:12px;gap:8px}
    .panel-body{padding:14px}
    .panel-footer>.btn,.panel-footer>.ds-btn{flex:1 1 auto}
  }
}

/* The shared MO pick cards are used on phones, tablets and desktop. */
.pp-scan-feedback:empty{display:none}
.pp-scan-feedback{padding:12px;margin-bottom:12px;border:1px solid var(--ds-border);border-radius:8px;overflow-wrap:anywhere}
.pp-scan-choice{display:block;width:100%;min-height:48px;white-space:normal;text-align:left;margin-top:8px;overflow-wrap:anywhere}
@media(max-width:600px){
 .pp-card-head{flex-wrap:wrap}
 .pp-card .pp-loc{max-width:100%;white-space:normal;overflow-wrap:anywhere}
 .pp-card input,.pp-card select{font-size:16px;min-width:0;max-width:100%;box-sizing:border-box}
 .pp-progress .pp-actions>*{min-height:48px;white-space:normal}
 .bc-scan-box{max-width:calc(100vw - 24px);box-sizing:border-box}
}

/* Production review: quantities belong to a material row, never an inline label run. */
#mo-production-output { container: mo-output / inline-size; }
#mo-production-output .mpo-material-table { table-layout: fixed; min-width: 0; }
#mo-production-output .mpo-material-table th,
#mo-production-output .mpo-material-table td { white-space: normal; overflow-wrap: anywhere; }
#mo-production-output .mpo-material-table input { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
@container mo-output (max-width: 640px) {
  #mo-production-output .mpo-material-table,
  #mo-production-output .mpo-material-table tbody { display: block; }
  #mo-production-output .mpo-material-table thead { display: none; }
  #mo-production-output .mpo-material-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 12px; }
  #mo-production-output .mpo-material-table th { grid-column: 1 / -1; }
  #mo-production-output .mpo-material-table td:nth-child(2)::before { content: "Already used"; }
  #mo-production-output .mpo-material-table td:nth-child(3)::before { content: "Recorded at co-man"; }
  #mo-production-output .mpo-material-table td:nth-child(4)::before { content: "Actual total used"; }
  #mo-production-output .mpo-material-table td:nth-child(5)::before { content: "Stays at co-man"; }
  #mo-production-output .mpo-material-table td::before { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: var(--text2); }
}
#mo-production-output label.ds-field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 12px 0; }
#mo-production-output .mpo-material-name { font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: normal; }