/* KIRAN OMS V4 Phase 7.1 — Master Order toolbar: fixed two-row desktop layout */
#pg-orders .mo-filter-shell{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:10px;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  padding:10px 12px;
  border:1px solid var(--bd);
  border-radius:12px;
  background:linear-gradient(180deg,#f8fbff 0%,#f4f7fb 100%);
  box-shadow:0 1px 3px rgba(15,23,42,.05);
}
#pg-orders .mo-filter-row{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  flex-wrap:nowrap;
}
#pg-orders .mo-filter-row-1{
  padding-bottom:8px;
  border-bottom:1px solid #e6edf5;
  overflow:visible;
  scrollbar-width:thin;
}
#pg-orders .mo-filter-row-2{
  justify-content:space-between;
  gap:12px;
  overflow:visible;
}
#pg-orders .mo-filter-row-2-filters{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  flex:1 1 auto;
  flex-wrap:nowrap;
  overflow:visible;
  scrollbar-width:thin;
}
#pg-orders .mo-action-wrap{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end;
  gap:7px!important;
  flex:0 0 auto!important;
  flex-wrap:nowrap!important;
  min-width:0!important;
  margin-left:auto!important;
}
#pg-orders .mo-filter-row .inp,
#pg-orders .mo-filter-row .sel,
#pg-orders .mo-filter-row .msel-btn,
#pg-orders .mo-filter-row .btn,
#pg-orders .mo-filter-row .qs-btn{
  height:38px;
  min-height:38px;
  box-sizing:border-box;
  border-radius:9px;
}
#pg-orders #q{width:195px!important;flex:0 0 195px}
#pg-orders #f-st-wrap{flex:0 0 156px}
#pg-orders #f-fa-wrap{flex:0 0 158px}
#pg-orders #f-pa-wrap{flex:0 0 158px}
#pg-orders #f-ar-wrap{flex:0 0 158px}
#pg-orders #f-bn-wrap{flex:0 0 165px}
#pg-orders #f-co{width:140px;flex:0 0 140px}
#pg-orders #flt-dml{width:135px;flex:0 0 135px}
#pg-orders #flt-material{width:190px;flex:1 1 190px;min-width:155px}
#pg-orders #f-bx-wrap{flex:0 0 130px}
#pg-orders #f-so-wrap{flex:0 0 130px}
#pg-orders #f-rmk{width:105px!important;flex:0 0 105px}
#pg-orders #f-od-wrap{flex:0 0 145px}
#pg-orders #f-wd-wrap{flex:0 0 145px}
#pg-orders #btn-clear-filters{flex:0 0 auto;padding:0 13px!important}
#pg-orders .mo-showing-count{white-space:nowrap;flex:0 0 auto;padding:0 3px}
#pg-orders .mo-sort-box{
  display:flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto!important;
  min-width:0;
}
#pg-orders .mo-sort-field{width:112px;min-width:112px;height:38px;border-radius:9px}
#pg-orders #reverse-selected-btn{padding:0 11px;white-space:nowrap}
#pg-orders .vtgl{display:flex!important;gap:4px!important;flex-wrap:nowrap!important;white-space:nowrap}
#pg-orders .vtgl .vb{height:38px;padding:0 11px;white-space:nowrap}
#pg-orders #xl-toggle-btn{height:38px;padding:0 12px;white-space:nowrap}
#pg-orders .btn-acc{height:38px;padding:0 14px;white-space:nowrap}
/* Keep multi-select popovers above the two-row toolbar and unclipped. */
#pg-orders .msel{position:relative;min-width:0}
#pg-orders .msel-panel{z-index:1250}
/* Compact desktop tuning: still exactly two rows; each row scrolls locally if needed. */
@media (max-width:1550px){
  #pg-orders .mo-filter-shell{padding:9px 10px;gap:7px}
  #pg-orders .mo-filter-row{gap:6px}
  #pg-orders .mo-filter-row-2{gap:8px}
  #pg-orders .mo-filter-row-2-filters{gap:6px}
  #pg-orders .mo-action-wrap{gap:5px!important}
  #pg-orders #q{width:175px!important;flex-basis:175px}
  #pg-orders #f-st-wrap,#pg-orders #f-fa-wrap,#pg-orders #f-pa-wrap,#pg-orders #f-ar-wrap{flex-basis:142px}
  #pg-orders #f-bn-wrap{flex-basis:148px}
  #pg-orders #f-co{width:125px;flex-basis:125px}
  #pg-orders #flt-dml{width:118px;flex-basis:118px}
  #pg-orders #flt-material{width:160px;min-width:145px;flex-basis:160px}
  #pg-orders #f-bx-wrap,#pg-orders #f-so-wrap{flex-basis:118px}
  #pg-orders #f-rmk{width:95px!important;flex-basis:95px}
  #pg-orders #f-od-wrap,#pg-orders #f-wd-wrap{flex-basis:132px}
  #pg-orders .mo-sort-field{width:102px;min-width:102px}
  #pg-orders .vtgl .vb{padding:0 8px}
  #pg-orders #reverse-selected-btn,#pg-orders #xl-toggle-btn,#pg-orders .btn-acc{padding-left:9px;padding-right:9px}
}
@media (max-width:1180px){
  #pg-orders .mo-filter-row-1{overflow-x:auto;overflow-y:hidden;padding-bottom:3px}
  #pg-orders .mo-filter-row-2{overflow-x:auto;overflow-y:hidden;padding-bottom:3px}
  #pg-orders .mo-filter-row-2-filters{flex:0 0 auto;overflow:visible}
  #pg-orders .mo-action-wrap{margin-left:8px!important}
}
@media (max-width:760px){
  #pg-orders .mo-filter-shell{padding:8px;border-radius:10px}
  #pg-orders .mo-filter-row-1,#pg-orders .mo-filter-row-2{overflow-x:auto}
}


/* ===== Phase 10.1 overlap fix ===== */
#pg-orders .mo-filter-shell{overflow:visible}
#pg-orders .mo-filter-row{flex-wrap:wrap;align-items:flex-start}
#pg-orders .mo-filter-row-1{overflow:visible;padding-bottom:6px}
#pg-orders .mo-filter-row-2{justify-content:flex-start;overflow:visible}
#pg-orders .mo-filter-row-2-filters{flex-wrap:wrap;row-gap:8px;column-gap:7px;overflow:visible}
#pg-orders .mo-action-wrap{
  flex:1 1 100%!important;
  width:100%;
  margin-left:0!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  row-gap:8px!important;
  padding-top:8px;
  border-top:1px dashed #d8e5f2;
}
#pg-orders .vtgl{flex-wrap:wrap!important}
#pg-orders .vtgl .vb{flex:0 0 auto}
#pg-orders #xl-toggle-btn,#pg-orders .btn-acc,#pg-orders #reverse-selected-btn{flex:0 0 auto}
#pg-orders #q{flex:1 1 220px!important;max-width:280px}
#pg-orders #flt-material{flex:1 1 190px;min-width:170px}
#pg-orders #f-rmk{min-width:110px}
@media (max-width:1550px){
  #pg-orders .mo-action-wrap{padding-top:6px}
}

/* ===== Phase 10.2 — no-overlap responsive Orders toolbar ===== */
#pg-orders .mo-filter-shell{gap:9px!important;padding:10px 11px!important}
#pg-orders .mo-filter-row-1{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr))!important;
  gap:7px!important;
  align-items:center!important;
  width:100%!important;
  overflow:visible!important;
}
#pg-orders .mo-filter-row-1>*{width:100%!important;min-width:0!important;max-width:none!important;flex:none!important}
#pg-orders .mo-filter-row-1 #q{grid-column:span 2;width:100%!important;max-width:none!important}
#pg-orders .mo-filter-row-2{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
  width:100%!important;
  overflow:visible!important;
}
#pg-orders .mo-filter-row-2-filters{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr))!important;
  gap:7px!important;
  width:100%!important;
  overflow:visible!important;
}
#pg-orders .mo-filter-row-2-filters>*{width:100%!important;min-width:0!important;max-width:none!important;flex:none!important}
#pg-orders .mo-action-wrap{
  display:flex!important;width:100%!important;gap:6px!important;align-items:center!important;
  justify-content:flex-start!important;flex-wrap:wrap!important;padding-top:8px!important;
  border-top:1px solid #e2e8f0!important;margin:0!important;
}
#pg-orders .mo-sort-box{display:flex!important;flex:0 1 auto!important;min-width:210px!important}
#pg-orders .mo-sort-field{width:125px!important;min-width:110px!important}
#pg-orders .vtgl{display:flex!important;flex-wrap:wrap!important;gap:4px!important}
#pg-orders .vtgl .vb{height:36px!important;padding:0 9px!important}
#pg-orders #xl-toggle-btn,#pg-orders .btn-acc,#pg-orders #reverse-selected-btn{height:36px!important}
#pg-orders .qs-bar{
  display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important;
  overflow:visible!important;white-space:normal!important;padding:8px 10px!important;
}
#pg-orders .qs-bar .qs-btn,#pg-orders .qs-bar .sel{flex:0 0 auto!important}
#pg-orders .qs-bar .qs-sep{height:25px!important}
@media(max-width:900px){
  #pg-orders .mo-filter-row-1,#pg-orders .mo-filter-row-2-filters{grid-template-columns:repeat(2,minmax(135px,1fr))!important}
  #pg-orders .mo-filter-row-1 #q{grid-column:1/-1}
}


/* ===== Phase 10.3 — explicit Sort By dropdown beside view selector ===== */
#pg-orders .mo-sort-box{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto!important;
  min-width:0;
  height:38px;
  padding:0 7px 0 10px;
  border:1px solid #d7e1ec;
  border-radius:9px;
  background:#fff;
  box-sizing:border-box;
}
#pg-orders .mo-sort-label{
  font-size:10.5px;
  line-height:1;
  font-weight:800;
  color:#475569;
  white-space:nowrap;
  cursor:pointer;
}
#pg-orders .mo-sort-field{
  width:142px!important;
  min-width:142px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0 28px 0 8px;
  border:0!important;
  border-left:1px solid #e2e8f0!important;
  border-radius:0!important;
  outline:none;
  background-color:#fff;
  color:#0f172a;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
#pg-orders .mo-sort-box:focus-within{
  border-color:#93c5fd;
  box-shadow:0 0 0 3px rgba(59,130,246,.10);
}
@media (max-width:1180px){
  #pg-orders .mo-sort-box{flex:0 0 auto!important}
  #pg-orders .mo-sort-field{width:132px!important;min-width:132px!important}
}


/* ===== Phase 10.4 — View buttons moved into compact dropdown ===== */
#pg-orders .vtgl-compat{display:none!important}
#pg-orders .mo-view-box{
  display:flex;align-items:center;gap:6px;flex:0 0 auto!important;min-width:0;height:38px;
  padding:0 7px 0 10px;border:1px solid #d7e1ec;border-radius:9px;background:#fff;box-sizing:border-box;
}
#pg-orders .mo-view-label{font-size:10.5px;line-height:1;font-weight:800;color:#475569;white-space:nowrap;cursor:pointer}
#pg-orders .mo-view-field{
  width:145px!important;min-width:145px!important;height:30px!important;min-height:30px!important;
  padding:0 28px 0 8px;border:0!important;border-left:1px solid #e2e8f0!important;border-radius:0!important;
  outline:none;background-color:#fff;color:#0f172a;font-size:11px;font-weight:700;cursor:pointer;
}
#pg-orders .mo-view-box:focus-within{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(59,130,246,.10)}
@media(max-width:1180px){#pg-orders .mo-view-field{width:132px!important;min-width:132px!important}}