/* Rotina360 R324 — experiência operacional profissional da separação E-commerce.
   Escopo: organização visual, responsividade e ergonomia. Regras de negócio permanecem no app. */

.page:has(.ecommerce-picking-page){
  --r324-navy:#0b2a4a;
  --r324-blue:#155eef;
  --r324-blue-soft:#eef4ff;
  --r324-green:#15803d;
  --r324-green-soft:#effcf4;
  --r324-amber:#b45309;
  --r324-red:#b42318;
  --r324-border:#d7e1ee;
  --r324-muted:#64748b;
  --r324-surface:#fff;
  width:100%;
  max-width:1500px;
  margin-inline:auto;
}

/* Cabeçalho mais curto e próximo da operação. */
.page:has(.ecommerce-picking-page) .page-header{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:8px!important;
  margin-bottom:12px!important;
  align-items:start!important;
}
.page:has(.ecommerce-picking-page) .page-header h1{
  margin:0 0 2px!important;
  color:var(--r324-navy)!important;
  font-size:24px!important;
  line-height:1.08!important;
  letter-spacing:-.03em!important;
}
.page:has(.ecommerce-picking-page) .page-header p{
  margin:0!important;
  max-width:860px;
  color:var(--r324-muted)!important;
  font-size:12px!important;
  line-height:1.4;
}

/* Barra operacional: filtros à esquerda e ações à direita. */
.page:has(.ecommerce-picking-page) .ecommerce-picking-page-actions{
  display:grid!important;
  grid-template-columns:minmax(170px,190px) minmax(290px,1fr) repeat(4,max-content)!important;
  width:100%!important;
  gap:8px!important;
  align-items:end!important;
  justify-content:stretch!important;
  padding:10px!important;
  border:1px solid var(--r324-border)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.92)!important;
  box-shadow:0 4px 14px rgba(15,42,72,.045)!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-page-actions .ecommerce-picking-selector{
  width:100%!important;
  min-width:0!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-page-actions .ecommerce-picking-selector select,
.page:has(.ecommerce-picking-page) .ecommerce-picking-page-actions .ecommerce-picking-selector.separation-choice select{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:40px!important;
  padding-inline:10px 30px!important;
  border-color:#c8d5e5!important;
  border-radius:9px!important;
  background:var(--r324-surface)!important;
  font-size:13px!important;
  font-weight:800!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-page-actions>button{
  min-height:40px!important;
  height:40px;
  padding:8px 12px!important;
  border-radius:9px!important;
  white-space:nowrap!important;
  box-shadow:none!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-page-actions>button.r324-action-new,
.page:has(.ecommerce-picking-page) .ecommerce-picking-page-actions>button.r321-action-new{
  background:var(--r324-blue)!important;
  border-color:var(--r324-blue)!important;
  color:#fff!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-page-actions>button.r324-context-action{
  grid-column:1/-1;
  justify-self:start;
  width:max-content;
  min-width:170px;
  border-color:#f3b4ae!important;
  background:#fff!important;
  color:var(--r324-red)!important;
}

/* Ordem visual principal. */
.page:has(.ecommerce-picking-page) .ecommerce-picking-page{
  gap:10px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-page>.r321-operation-actions{order:-30}
.page:has(.ecommerce-picking-page) .ecommerce-picking-page>.ecommerce-picking-summary{order:-20}
.page:has(.ecommerce-picking-page) .ecommerce-picking-page>.ecommerce-picking-workflow-tabs{order:-10}
.page:has(.ecommerce-picking-page) .ecommerce-picking-page>.ecommerce-picking-scanner{order:0}
.page:has(.ecommerce-picking-page) .ecommerce-picking-page>.ecommerce-picking-list{order:10}
.page:has(.ecommerce-picking-page) .ecommerce-picking-page>.ecommerce-order-assembly{order:10}
.page:has(.ecommerce-picking-page) .ecommerce-picking-page>.ecommerce-day-closing{order:20}
.page:has(.ecommerce-picking-page) .ecommerce-picking-page>.panel{
  margin:0!important;
  border-color:var(--r324-border)!important;
  border-radius:12px!important;
  box-shadow:0 4px 15px rgba(15,42,72,.045)!important;
}

/* Ações contextuais imediatamente abaixo da barra operacional. */
.page:has(.ecommerce-picking-page) .r321-operation-actions{
  min-height:48px!important;
  padding:8px 12px!important;
  gap:10px!important;
  border-radius:11px!important;
  box-shadow:none!important;
}
.page:has(.ecommerce-picking-page) .r321-operation-badge{
  min-width:30px!important;
  height:30px!important;
  border-radius:8px!important;
}
.page:has(.ecommerce-picking-page) .r321-operation-info strong{font-size:12px!important}
.page:has(.ecommerce-picking-page) .r321-operation-info small{font-size:9px!important}
.page:has(.ecommerce-picking-page) .r321-operation-buttons button{min-height:34px!important;padding:6px 10px!important}

/* Resumo compacto: conteúdo + quatro KPIs + progresso. */
.page:has(.ecommerce-picking-page) .ecommerce-picking-summary{
  display:grid!important;
  grid-template-columns:minmax(320px,1.15fr) minmax(430px,.85fr)!important;
  gap:12px 16px!important;
  align-items:center!important;
  padding:12px 16px!important;
  background:linear-gradient(135deg,#fff 0%,#fbfdff 100%)!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-file-info{
  align-content:center!important;
  gap:2px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-kicker{font-size:9px!important;letter-spacing:.07em!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-file-info>strong{
  color:var(--r324-navy)!important;
  font-size:15px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-file-info>small{
  font-size:10px!important;
  line-height:1.4!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-kpis{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(92px,1fr))!important;
  gap:7px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-kpis>div{
  min-height:56px!important;
  padding:8px 10px!important;
  align-content:center!important;
  border-color:#dbe5f0!important;
  border-radius:9px!important;
  background:#f8fbff!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-kpis strong{
  font-size:18px!important;
  line-height:1.05!important;
  color:var(--r324-navy)!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-kpis span{font-size:9px!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-progress{
  height:5px!important;
  margin-top:0!important;
}

/* Stepper fino, com leitura imediata. */
.page:has(.ecommerce-picking-page) .ecommerce-picking-workflow-tabs{
  gap:6px!important;
  padding:6px!important;
  border-radius:11px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-workflow-tabs>button{
  min-height:48px!important;
  padding:7px 10px!important;
  border-radius:9px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-workflow-tabs>button>span{
  width:26px!important;
  height:26px!important;
  flex-basis:26px!important;
  border-radius:7px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-workflow-tabs>button strong{font-size:12px!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-workflow-tabs>button small{font-size:8px!important}

/* Bipagem: intro curto + campo dominante + contador + salvar na mesma faixa. */
.page:has(.ecommerce-picking-page) .ecommerce-picking-scanner{
  display:grid!important;
  grid-template-columns:minmax(220px,.65fr) minmax(520px,1.65fr)!important;
  gap:12px!important;
  align-items:center!important;
  padding:11px 14px!important;
  border-color:#c8d8f5!important;
  background:linear-gradient(135deg,#fff,#f8fbff)!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-scanner-intro,
.page:has(.ecommerce-picking-page) .ecommerce-picking-scanner>div:first-child{gap:2px!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-scanner-intro strong,
.page:has(.ecommerce-picking-page) .ecommerce-picking-scanner>div:first-child strong{font-size:14px!important;color:var(--r324-navy)!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-scanner small{font-size:10px!important;line-height:1.35!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-scan-row{
  display:grid!important;
  grid-template-columns:minmax(300px,1fr) 116px 100px!important;
  gap:7px!important;
  align-items:end!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-scan-field>span,
.page:has(.ecommerce-picking-page) .ecommerce-picking-desktop-piece-count span{font-size:8px!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-scan-row input{
  min-height:44px!important;
  height:44px!important;
  padding:9px 12px!important;
  border-width:2px!important;
  border-radius:9px!important;
  font-size:16px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-desktop-piece-count{
  min-height:44px!important;
  height:44px!important;
  padding:6px 10px!important;
  border-radius:9px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-desktop-piece-count strong{font-size:17px!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-scan-row>button{
  min-width:100px!important;
  width:100px!important;
  height:44px!important;
  min-height:44px!important;
  border-radius:9px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-feedback{
  grid-column:1/-1!important;
  padding:8px 10px!important;
  font-size:10px!important;
}

/* Roteiro e filtros na mesma faixa visual. */
.page:has(.ecommerce-picking-page) .ecommerce-picking-list{
  gap:7px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-list>header{
  display:grid!important;
  grid-template-columns:minmax(230px,.4fr) minmax(0,1fr)!important;
  gap:12px!important;
  align-items:end!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-list h2{
  margin:0 0 2px!important;
  color:var(--r324-navy)!important;
  font-size:15px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-list p{font-size:10px!important;line-height:1.35!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-filters{
  display:grid!important;
  grid-template-columns:minmax(260px,1.45fr) minmax(150px,.68fr) minmax(190px,.78fr) auto!important;
  gap:8px!important;
  width:100%!important;
  align-items:end!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-filters label{gap:3px!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-filters label>span{font-size:8px!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-filters :is(input,select){
  min-height:36px!important;
  height:36px!important;
  padding:7px 9px!important;
  border-radius:8px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-filters>strong{
  padding:0 0 9px!important;
  font-size:9px!important;
  color:var(--r324-muted)!important;
}

/* Tabela: maior protagonismo e melhor densidade operacional. */
.page:has(.ecommerce-picking-page) .ecommerce-picking-table-wrap{
  max-height:calc(100vh - 355px)!important;
  min-height:150px;
  border-color:#c5d2e2!important;
  border-radius:9px!important;
  box-shadow:0 4px 14px rgba(15,23,42,.045)!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-table{
  min-width:1060px!important;
  font-size:11px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-table th{
  height:36px!important;
  padding:6px 8px!important;
  font-size:9px!important;
  background:#e7eef8!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-table td{
  height:48px!important;
  padding:6px 8px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-table th:first-child,
.page:has(.ecommerce-picking-page) .ecommerce-picking-table td:first-child{width:52px!important;min-width:52px!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-table th:nth-child(2),
.page:has(.ecommerce-picking-page) .ecommerce-picking-table td:nth-child(2){left:52px!important;width:112px!important;min-width:112px!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-table th:nth-child(3),
.page:has(.ecommerce-picking-page) .ecommerce-picking-table td:nth-child(3){width:128px;min-width:128px}
.page:has(.ecommerce-picking-page) .ecommerce-picking-table th:nth-child(4),
.page:has(.ecommerce-picking-page) .ecommerce-picking-table td:nth-child(4){min-width:250px}
.page:has(.ecommerce-picking-page) .ecommerce-picking-table th:nth-child(5),
.page:has(.ecommerce-picking-page) .ecommerce-picking-table td:nth-child(5){width:112px;min-width:112px}
.page:has(.ecommerce-picking-page) .ecommerce-picking-table th:nth-child(6),
.page:has(.ecommerce-picking-page) .ecommerce-picking-table td:nth-child(6),
.page:has(.ecommerce-picking-page) .ecommerce-picking-table th:nth-child(7),
.page:has(.ecommerce-picking-page) .ecommerce-picking-table td:nth-child(7),
.page:has(.ecommerce-picking-page) .ecommerce-picking-table th:nth-child(8),
.page:has(.ecommerce-picking-page) .ecommerce-picking-table td:nth-child(8){width:86px;min-width:86px;text-align:center}
.page:has(.ecommerce-picking-page) .ecommerce-picking-table th:nth-child(9),
.page:has(.ecommerce-picking-page) .ecommerce-picking-table td:nth-child(9){width:112px;min-width:112px;text-align:center}
.page:has(.ecommerce-picking-page) .ecommerce-picking-table th:nth-child(10),
.page:has(.ecommerce-picking-page) .ecommerce-picking-table td:nth-child(10){width:136px;min-width:136px}
.page:has(.ecommerce-picking-page) .ecommerce-picking-table-location strong{font-size:14px!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-table-location small{font-size:7px!important;padding:2px 4px!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-factory-code,
.page:has(.ecommerce-picking-page) .ecommerce-picking-sku{font-size:10px!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-product-name{
  min-width:230px!important;
  max-width:480px!important;
  font-size:11px!important;
  line-height:1.3!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-quantity{min-width:0!important;font-size:10px!important}
.page:has(.ecommerce-picking-page) .ecommerce-picking-table-status{
  min-width:86px!important;
  padding:4px 7px!important;
  font-size:8px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-table-actions{
  min-width:126px!important;
  gap:5px!important;
  justify-content:flex-start;
}
.page:has(.ecommerce-picking-page) .ecommerce-picking-table-actions button{
  width:36px!important;
  min-width:36px!important;
  height:32px!important;
  min-height:32px!important;
  border-radius:8px!important;
  font-size:11px!important;
}

/* Montagem: mesma linguagem visual, sem cinco cards gigantes. */
.page:has(.ecommerce-picking-page) .ecommerce-order-assembly{
  gap:9px!important;
  padding:12px!important;
  border-radius:12px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-order-assembly>header h2{font-size:15px!important}
.page:has(.ecommerce-picking-page) .ecommerce-order-assembly>header p{font-size:10px!important}
.page:has(.ecommerce-picking-page) .ecommerce-order-kpis{
  grid-template-columns:repeat(auto-fit,minmax(105px,1fr))!important;
  gap:6px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-order-kpis>div{
  min-height:52px;
  padding:7px 9px!important;
  border-radius:8px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-order-kpis strong{font-size:17px!important}
.page:has(.ecommerce-picking-page) .ecommerce-order-kpis span{font-size:8px!important}
.page:has(.ecommerce-picking-page) .ecommerce-order-workspace{
  grid-template-columns:280px minmax(0,1fr)!important;
  gap:10px!important;
  min-height:360px!important;
}
.page:has(.ecommerce-picking-page) .ecommerce-order-list{padding:7px!important;border-radius:9px!important}
.page:has(.ecommerce-picking-page) .ecommerce-order-detail{gap:9px!important;padding:11px!important;border-radius:9px!important}
.page:has(.ecommerce-picking-page) .ecommerce-order-scan{padding:8px!important}

/* Estado vazio fica limpo; conteúdo anterior não concorre visualmente. */
.page:has(.ecommerce-picking-page) #r323-ecommerce-empty{
  min-height:250px!important;
  margin-top:0!important;
  padding:30px 20px!important;
  border-radius:12px!important;
}

/* Tema escuro. */
[data-theme="dark"] .page:has(.ecommerce-picking-page) .ecommerce-picking-page-actions,
[data-theme="dark"] .page:has(.ecommerce-picking-page) .ecommerce-picking-summary,
[data-theme="dark"] .page:has(.ecommerce-picking-page) .ecommerce-picking-scanner{
  background:var(--surface)!important;
  border-color:var(--border)!important;
}
[data-theme="dark"] .page:has(.ecommerce-picking-page) .ecommerce-picking-kpis>div{
  background:var(--surface-2)!important;
}
[data-theme="dark"] .page:has(.ecommerce-picking-page) .page-header h1,
[data-theme="dark"] .page:has(.ecommerce-picking-page) .ecommerce-picking-file-info>strong,
[data-theme="dark"] .page:has(.ecommerce-picking-page) .ecommerce-picking-list h2{
  color:var(--text)!important;
}

/* Tablet. */
@media(max-width:1020px){
  .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%;white-space:normal!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-page-actions>button.r324-context-action{width:100%;grid-column:1/-1}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-summary{grid-template-columns:1fr!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-scanner{grid-template-columns:1fr!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-list>header{grid-template-columns:1fr!important}
  .page:has(.ecommerce-picking-page) .ecommerce-order-workspace{grid-template-columns:220px minmax(0,1fr)!important}
}

@media(max-width:820px){
  .page:has(.ecommerce-picking-page) .page-header h1{font-size:21px!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .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-workflow-tabs>button{min-width:0!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) .ecommerce-picking-filters>strong{padding:0!important;align-self:center}
  .page:has(.ecommerce-picking-page) .ecommerce-order-workspace{grid-template-columns:1fr!important}
}

/* Mobile. */
@media(max-width:560px){
  .page:has(.ecommerce-picking-page) .page-header{margin-bottom:9px!important}
  .page:has(.ecommerce-picking-page) .page-header h1{font-size:19px!important}
  .page:has(.ecommerce-picking-page) .page-header p{font-size:11px!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-page-actions{
    grid-template-columns:1fr!important;
    padding:8px!important;
    gap:6px!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-summary{padding:10px 11px!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-kpis{gap:5px!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-kpis>div{min-height:50px!important;padding:7px!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-kpis strong{font-size:16px!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-workflow-tabs{gap:5px!important;padding:5px!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-workflow-tabs>button{min-height:46px!important;padding:6px!important;gap:6px!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-workflow-tabs>button>span{width:24px!important;height:24px!important;flex-basis:24px!important}
  .page:has(.ecommerce-picking-page) .ecommerce-picking-scanner{padding:10px!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-filters>strong{font-size:9px!important}
  .page:has(.ecommerce-picking-page) .r321-operation-actions{grid-template-columns:1fr!important}
  .page:has(.ecommerce-picking-page) .r321-operation-buttons{justify-content:stretch!important;display:grid!important;grid-template-columns:1fr!important}
  .page:has(.ecommerce-picking-page) .r321-operation-buttons button{width:100%!important}
}