/* Rotina360 R325 — correção estrutural da distribuição da separação E-commerce.
   Atua por override sobre R324. Regras de negócio permanecem intactas. */

.page:has(.ecommerce-picking-page){
  --r325-border:#d7e1ee;
  --r325-surface:#fff;
  --r325-muted:#64748b;
  --r325-navy:#0b2a4a;
  max-width:1360px!important;
  margin-inline:auto!important;
}

/* O problema visual anterior vinha também do wrapper page-actions, que mantinha a barra deslocada. */
.page:has(.ecommerce-picking-page) .page-header{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  margin-bottom:12px!important;
}
.page:has(.ecommerce-picking-page) .page-header>.page-actions{
  width:100%!important;
  min-width:0!important;
  display:block!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-page-actions{
  width:100%!important;
  display:grid!important;
  grid-template-columns:180px minmax(260px,1fr) max-content max-content max-content max-content!important;
  align-items:end!important;
  gap:8px!important;
  padding:9px 10px!important;
  border:1px solid var(--r325-border)!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 5px 18px rgba(15,42,72,.045)!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-page-actions>button{
  height:40px!important;
  min-height:40px!important;
  padding-inline:12px!important;
}

/* Com o painel de ações carregado, o botão nativo antigo sai do topo. */
.page:has(#r321-ecommerce-operation-actions) .ecommerce-picking-page-actions>button.danger{
  display:none!important;
}

/* Painel contextual realmente separado da navegação. */
.page:has(.ecommerce-picking-page) .r321-operation-actions{
  order:-30!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  min-height:44px!important;
  padding:7px 10px!important;
  margin:0!important;
  border-radius:10px!important;
}
.page:has(.ecommerce-picking-page) .r321-operation-info{
  gap:1px 8px!important;
}
.page:has(.ecommerce-picking-page) .r321-operation-badge{
  width:28px!important;
  min-width:28px!important;
  height:28px!important;
}

/* Resumo mais enxuto e menos espalhado. */
.page:has(.ecommerce-picking-page) .ecommerce-picking-summary{
  grid-template-columns:minmax(330px,.72fr) minmax(560px,1.28fr)!important;
  gap:10px 18px!important;
  padding:10px 14px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-file-info>strong{font-size:14px!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-file-info>small{font-size:9px!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-kpis>div{
  min-height:50px!important;
  padding:7px 9px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-kpis strong{font-size:17px!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-progress{height:4px!important}

/* Stepper vira faixa de processo, e não outro grande card. */
.page:has(.ecommerce-picking-page) .ecommerce-picking-workflow-tabs{
  padding:5px!important;
  gap:5px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-workflow-tabs>button{
  min-height:42px!important;
  height:42px!important;
  padding:5px 9px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-workflow-tabs>button>span{
  width:24px!important;
  min-width:24px!important;
  height:24px!important;
  flex-basis:24px!important;
}

/* Bipagem com prioridade total ao leitor, sem bloco introdutório largo demais. */
.page:has(.ecommerce-picking-page) .ecommerce-picking-scanner{
  grid-template-columns:190px minmax(0,1fr)!important;
  gap:12px!important;
  padding:10px 12px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-scanner-intro strong{font-size:13px!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-scanner-intro small{font-size:9px!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-scan-row{
  grid-template-columns:minmax(320px,1fr) 110px 96px!important;
  gap:7px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-scan-row input,
.page:has(.ecommerce-picking-page) .ecommerce-picking-desktop-piece-count,
.page:has(.ecommerce-picking-page) .ecommerce-picking-scan-row>button{
  height:42px!important;
  min-height:42px!important;
}

/* O roteiro passa a ser um único painel coerente: título, filtros e grade. */
.page:has(.ecommerce-picking-page) .ecommerce-picking-list{
  display:grid!important;
  gap:9px!important;
  padding:11px!important;
  border:1px solid var(--r325-border)!important;
  border-radius:12px!important;
  background:var(--r325-surface)!important;
  box-shadow:0 4px 15px rgba(15,42,72,.04)!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-list>header{
  grid-template-columns:230px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:end!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-list h2{font-size:14px!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-list p{font-size:9px!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-filters{
  grid-template-columns:minmax(250px,1.4fr) 180px 220px auto!important;
  gap:7px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-filters :is(input,select){
  height:34px!important;
  min-height:34px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-filters>strong{
  padding-bottom:8px!important;
}

/* Remove o grande vazio quando há poucas linhas. */
.page:has(.ecommerce-picking-page) .ecommerce-picking-table-wrap{
  min-height:0!important;
  max-height:calc(100vh - 330px)!important;
  overflow:auto!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-table th{
  height:34px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-table td{
  height:46px!important;
}

/* Montagem mais contida. */
.page:has(.ecommerce-picking-page) .ecommerce-order-assembly{
  padding:11px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-order-workspace{
  grid-template-columns:260px minmax(0,1fr)!important;
  min-height:330px!important;
}

[data-theme="dark"] .page:has(.ecommerce-picking-page) .ecommerce-picking-page-actions,
[data-theme="dark"] .page:has(.ecommerce-picking-page) .ecommerce-picking-list{
  background:var(--surface)!important;
  border-color:var(--border)!important;
}

@media(max-width:1180px){
  .page:has(.ecommerce-picking-page){max-width:100%!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-page-actions{
    grid-template-columns:180px minmax(260px,1fr) repeat(2,max-content)!important;
  }
  .page:has(.ecommerce-picking-page) .ecommerce-picking-summary{grid-template-columns:1fr!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-list>header{grid-template-columns:1fr!important}
}

@media(max-width:820px){
  .page:has(.ecommerce-picking-page) .ecommerce-picking-page-actions{
    grid-template-columns:1fr 1fr!important;
  }
  .page:has(.ecommerce-picking-page) .ecommerce-picking-page-actions .ecommerce-picking-selector.separation-choice{grid-column:1/-1}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-page-actions>button{width:100%!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-scanner{grid-template-columns:1fr!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-filters{grid-template-columns:1fr 1fr!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-filters label.search{grid-column:1/-1!important}
  .page:has(.ecommerce-picking-page) .r321-operation-actions{grid-template-columns:1fr!important}
}

@media(max-width:560px){
  .page:has(.ecommerce-picking-page) .ecommerce-picking-page-actions{grid-template-columns:1fr!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-page-actions .ecommerce-picking-selector.separation-choice{grid-column:auto}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-workflow-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-filters{grid-template-columns:1fr!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-filters label.search{grid-column:auto!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-list{padding:9px!important}
}