/* Rotina360 R321 — Separação e montagem E-commerce
   Organiza o cabeçalho operacional e torna ações de pendência visíveis. */

.page:has(.ecommerce-picking-page){
  --r321-navy:#0b2a4a;
  --r321-blue:#155eef;
  --r321-blue-soft:#eef4ff;
  --r321-green:#15803d;
  --r321-green-soft:#effcf4;
  --r321-amber:#b45309;
  --r321-amber-soft:#fff8eb;
  --r321-red:#b42318;
  --r321-red-soft:#fff2f0;
  --r321-border:#d7e1ee;
  --r321-muted:#64748b;
  --r321-surface:#fff;
}

.page:has(.ecommerce-picking-page) .page-header{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:13px;
  align-items:start;
  margin-bottom:14px;
}
.page:has(.ecommerce-picking-page) .page-header h1{
  margin:0 0 3px;
  color:var(--r321-navy);
  font-size:28px;
  line-height:1.08;
  letter-spacing:-.035em;
}
.page:has(.ecommerce-picking-page) .page-header p{
  max-width:850px;
  color:var(--r321-muted);
}

.ecommerce-picking-page-actions{
  display:grid!important;
  grid-template-columns:minmax(160px,190px) minmax(300px,1fr) repeat(4,max-content);
  width:100%;
  gap:8px;
  align-items:end!important;
  justify-content:stretch!important;
  padding:11px;
  border:1px solid var(--r321-border);
  border-radius:13px;
  background:rgba(255,255,255,.82);
  box-shadow:0 4px 16px rgba(15,42,72,.045);
}
.ecommerce-picking-page-actions .ecommerce-picking-selector{
  width:100%;
  min-width:0!important;
}
.ecommerce-picking-page-actions .ecommerce-picking-selector select,
.ecommerce-picking-page-actions .ecommerce-picking-selector.separation-choice select{
  width:100%;
  min-width:0!important;
  max-width:none!important;
  height:40px;
  border-color:#c8d5e5;
  border-radius:9px;
  background:var(--r321-surface);
  font-size:13px;
  font-weight:800;
}
.ecommerce-picking-page-actions>button{
  min-height:40px;
  border-radius:9px;
  padding:8px 12px;
  white-space:nowrap;
  box-shadow:none;
}
.ecommerce-picking-page-actions>button.r321-action-new{
  background:var(--r321-blue)!important;
  border-color:var(--r321-blue)!important;
  color:#fff!important;
}
.ecommerce-picking-page-actions>button.r321-action-close-day{
  background:#f8fafc!important;
  border-color:#cbd5e1!important;
  color:#334155!important;
}
.ecommerce-picking-page-actions>button.r321-native-legacy-close{
  display:none!important;
}

.ecommerce-picking-page{
  gap:12px!important;
}
.ecommerce-picking-page>.panel{
  border-color:var(--r321-border);
  border-radius:14px;
  box-shadow:0 5px 18px rgba(15,42,72,.05);
}
.ecommerce-picking-summary{
  grid-template-columns:minmax(320px,1fr) minmax(430px,.8fr)!important;
  gap:16px!important;
  padding:16px 18px!important;
  background:linear-gradient(135deg,#fff 0%,#fbfdff 100%)!important;
}
.ecommerce-picking-file-info{
  align-content:center;
  gap:3px!important;
}
.ecommerce-picking-file-info>strong{
  color:var(--r321-navy);
  font-size:16px;
}
.ecommerce-picking-file-info>small{
  line-height:1.45;
}
.ecommerce-picking-kpis{
  grid-template-columns:repeat(4,minmax(95px,1fr))!important;
  gap:7px!important;
}
.ecommerce-picking-kpis>div{
  min-height:66px;
  align-content:center;
  padding:10px 12px!important;
  border-color:#dbe5f0!important;
  background:#f8fbff!important;
}
.ecommerce-picking-kpis strong{
  color:var(--r321-navy);
  font-size:20px!important;
}
.ecommerce-picking-progress{
  height:7px!important;
  margin-top:1px;
}

.r321-operation-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:12px 14px;
  border:1px solid var(--r321-border);
  border-left:4px solid #94a3b8;
  border-radius:12px;
  background:#fff;
  box-shadow:0 3px 12px rgba(15,42,72,.035);
}
.r321-operation-actions[data-state="pending"]{
  border-left-color:#f59e0b;
  background:var(--r321-amber-soft);
}
.r321-operation-actions[data-state="working"]{
  border-left-color:var(--r321-blue);
  background:#f7faff;
}
.r321-operation-actions[data-state="done"]{
  border-left-color:#22a06b;
  background:var(--r321-green-soft);
}
.r321-operation-actions[data-state="cancelled"]{
  border-left-color:#94a3b8;
  background:#f8fafc;
}
.r321-operation-info{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:2px 10px;
  align-items:center;
  min-width:0;
}
.r321-operation-badge{
  grid-row:1/3;
  display:grid;
  place-items:center;
  min-width:34px;
  height:34px;
  padding:0 9px;
  border-radius:9px;
  background:#e2e8f0;
  color:#475569;
  font-size:11px;
  font-weight:900;
}
.r321-operation-actions[data-state="pending"] .r321-operation-badge{background:#ffedd5;color:#9a3412}
.r321-operation-actions[data-state="working"] .r321-operation-badge{background:#dbeafe;color:#1d4ed8}
.r321-operation-actions[data-state="done"] .r321-operation-badge{background:#dcfce7;color:#166534}
.r321-operation-info strong{
  overflow:hidden;
  color:var(--r321-navy);
  font-size:13px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.r321-operation-info small{
  color:var(--r321-muted);
  font-size:10px;
  line-height:1.35;
}
.r321-operation-buttons{
  display:flex;
  gap:7px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.r321-operation-buttons button,
.ecommerce-order-detail-actions .r321-cancel-order{
  min-height:36px;
  border-radius:9px;
  padding:7px 11px;
  font-size:11px;
  font-weight:850;
}
.r321-operation-buttons .r321-warning{
  border-color:#f2b665;
  background:#fff7ed;
  color:#9a3412;
}
.r321-operation-buttons .r321-danger,
.ecommerce-order-detail-actions .r321-cancel-order{
  border-color:#f5b5ad;
  background:#fff;
  color:var(--r321-red);
}
.r321-operation-buttons .r321-danger:hover,
.ecommerce-order-detail-actions .r321-cancel-order:hover{
  border-color:#ef8d82;
  background:var(--r321-red-soft);
}
.r321-operation-buttons button:disabled{
  opacity:.55;
}

.ecommerce-picking-workflow-tabs{
  gap:7px!important;
  padding:7px!important;
  border-radius:12px!important;
}
.ecommerce-picking-workflow-tabs>button{
  min-height:50px!important;
  padding:8px 11px!important;
}
.ecommerce-picking-workflow-tabs>button>span{
  width:28px!important;
  height:28px!important;
  flex-basis:28px!important;
}

.ecommerce-order-assembly{
  border-radius:14px!important;
}
.ecommerce-order-kpis>div{
  border-color:#dbe5f0!important;
}
.ecommerce-order-detail-actions .r321-cancel-order{
  order:20;
}

.r321-toast{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:9999;
  max-width:min(420px,calc(100vw - 32px));
  padding:11px 14px;
  border-radius:10px;
  background:#0f2d4d;
  color:#fff;
  box-shadow:0 16px 40px rgba(15,23,42,.22);
  font-size:12px;
  font-weight:700;
}
.r321-toast.error{background:#991b1b}
.r321-toast.success{background:#166534}

[data-theme="dark"] .ecommerce-picking-page-actions,
[data-theme="dark"] .r321-operation-actions{
  background:var(--surface);
  border-color:var(--border);
}
[data-theme="dark"] .ecommerce-picking-summary{
  background:var(--surface)!important;
}
[data-theme="dark"] .ecommerce-picking-kpis>div{
  background:var(--surface-2)!important;
}
[data-theme="dark"] .r321-operation-actions[data-state="pending"]{background:#2b2114}
[data-theme="dark"] .r321-operation-actions[data-state="working"]{background:#14233c}
[data-theme="dark"] .r321-operation-actions[data-state="done"]{background:#112a20}

@media(max-width:1180px){
  .ecommerce-picking-page-actions{
    grid-template-columns:minmax(150px,.7fr) minmax(260px,1.3fr) repeat(2,max-content);
  }
  .ecommerce-picking-page-actions>button:nth-of-type(n+3){grid-row:auto}
  .ecommerce-picking-summary{grid-template-columns:1fr!important}
}
@media(max-width:820px){
  .page:has(.ecommerce-picking-page) .page-header h1{font-size:22px}
  .ecommerce-picking-page-actions{
    grid-template-columns:1fr 1fr!important;
  }
  .ecommerce-picking-page-actions .ecommerce-picking-selector.separation-choice{grid-column:1/-1}
  .ecommerce-picking-page-actions>button{width:100%;white-space:normal}
  .r321-operation-actions{grid-template-columns:1fr}
  .r321-operation-buttons{justify-content:flex-start}
}
@media(max-width:560px){
  .ecommerce-picking-page-actions{grid-template-columns:1fr!important;padding:9px}
  .ecommerce-picking-page-actions .ecommerce-picking-selector.separation-choice{grid-column:auto}
  .ecommerce-picking-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .r321-operation-buttons{display:grid;grid-template-columns:1fr}
  .r321-operation-buttons button{width:100%}
  .r321-operation-info strong{white-space:normal}
}