/* Focused operational flows share the dark app shell and persistent dialog actions. */
.flow-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:10px 0 14px; }
.flow-toolbar .btn { min-height:36px; font-size:13px; padding:8px 12px; }
#flowRecover { display:block; width:100%; min-height:44px; margin:0 0 16px; padding:12px; color:var(--ds-warning); background:#342b1e; border:1px solid #705b36; text-align:left; white-space:normal; }
#flowRecover[hidden], .flow-stage-hidden { display:none!important; }
.flow-dialog .dialog__content label { display:flex; flex-direction:column; gap:7px; font-size:13px; color:var(--ds-muted); }
.flow-dialog .dialog__content .input { width:100%; min-width:0; }
.flow-stepper { display:flex; gap:6px; padding:4px; margin:0 0 16px; background:var(--ds-inset); border:1px solid var(--ds-border); border-radius:12px; }
.flow-stepper > * { flex:1; min-width:0; padding:9px 8px; border:0; border-radius:8px; background:transparent; color:var(--ds-muted); font:inherit; font-size:13px; text-align:center; line-height:1.4; }
.flow-stepper > .is-active { color:var(--ds-accent); background:var(--ds-soft); font-weight:650; }
.flow-stepper > button:not(:disabled) { cursor:pointer; }
.flow-stepper > button:focus-visible { outline:2px solid var(--ds-accent); outline-offset:2px; }
.flow-tools { display:flex; align-items:end; gap:16px; margin-bottom:12px; }
.flow-tools > label { flex:1; }
.flow-tools .hint { max-width:200px; }
.flow-count-list { display:grid; gap:0; }
.flow-dialog .flow-count-row { display:grid!important; grid-template-columns:minmax(0,1fr) 150px; gap:20px; align-items:center; padding:13px 0; border-bottom:1px solid var(--ds-border); }
.flow-count-row strong,.flow-review-row strong { display:block; color:var(--ds-text); font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
.flow-count-row small,.flow-search-result small,.flow-review-row small { display:block; margin-top:4px; color:var(--ds-muted); font-size:13px; line-height:1.5; }
.flow-count-field { display:grid; gap:6px; font-size:13px; color:var(--ds-muted); }
.flow-count-field .input { min-height:42px; }
.flow-review-summary { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px; margin-bottom:8px; border-radius:12px; background:var(--ds-soft); color:var(--ds-accent); font-size:13px; }
.flow-review-summary span { font-size:13px; }
.flow-review-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--ds-border); font-size:13px; line-height:1.5; }
.flow-review-row > :first-child { flex:1; min-width:0; }
.flow-review-row > :not(:first-child) { flex-shrink:0; }
.flow-negative { color:var(--ds-danger); }
.flow-positive { color:var(--ds-accent); }
.flow-two-fields { display:grid; grid-template-columns:minmax(100px,.7fr) minmax(0,1.3fr); gap:14px; margin-top:16px; }
.flow-search-camera { display:flex; align-items:center; gap:8px; }
.flow-search-camera .input { flex:1; }
.flow-search-camera .btn { flex-shrink:0; }
.flow-search-results { display:grid; gap:6px; }
.flow-search-result { display:flex; justify-content:space-between; align-items:center; gap:16px; width:100%; min-height:60px; padding:13px 14px; background:var(--ds-inset); border:1px solid var(--ds-border); border-radius:10px; color:var(--ds-text); font:inherit; text-align:left; cursor:pointer; }
.flow-search-result:hover,.flow-search-result:focus-visible { background:var(--ds-elevated); border-color:var(--ds-accent); }
.flow-search-result strong { font-size:13px; }
.flow-search-result b { font-size:13px; white-space:nowrap; color:var(--ds-accent); }
.flow-selected { display:flex; flex-direction:column; gap:6px; padding:16px; background:var(--ds-inset); border:1px solid var(--ds-border); border-left:3px solid var(--ds-accent); border-radius:10px; color:var(--ds-text); font-size:14px; }
.flow-selected span { color:var(--ds-muted); font-size:13px; }
.flow-impact { padding:12px 14px; margin:14px 0 0; background:var(--ds-inset); border:1px solid var(--ds-border); border-radius:10px; color:var(--ds-muted); font-size:13px; line-height:1.6; }
.flow-session-log h4 { margin:0 0 10px; font-size:13px; color:var(--ds-muted); }
.flow-session-log > div { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--ds-border); font-size:13px; }
.flow-session-log > div > span { flex:1; }
.flow-session-log strong { color:var(--ds-accent); }
.flow-session-log time { color:var(--ds-muted); font-size:13px; }
#flowReceiveVideo { display:block; width:100%; max-height:280px; object-fit:cover; border-radius:12px; margin-bottom:8px; background:#000; }
.flow-pack-progress { font-size:13px; color:var(--ds-muted); margin:8px 0 0; }
#upsellerProcessDialog .upseller-process__list .flow-pack-check { display:flex; align-items:center; gap:9px; grid-column:1/-1; width:100%; min-height:44px; padding:8px 12px; background:var(--ds-inset); border:1px solid var(--ds-border); border-radius:9px; font-size:13px; cursor:pointer; }
.flow-pack-check input { width:19px; height:19px; accent-color:var(--ds-accent); }
.flow-pack-check:has(input:checked) { border-color:#375866!important; color:var(--ds-accent); }
.flow-loss-action { width:100%; min-height:36px!important; margin-top:9px; font-size:13px!important; }
.flow-loss-history { margin-top:24px; padding:20px; background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:14px; }
.flow-loss-history h3 { font-size:16px; margin:0 0 8px; }
.flow-loss-history .flow-review-row > :last-child { max-width:135px; font-size:13px; color:var(--ds-muted); }
@media (max-width:767px) {
  .flow-toolbar { margin:8px 0 12px; gap:6px; }
  .flow-toolbar .btn { min-height:42px; font-size:13px; }
  .flow-dialog .flow-count-row { grid-template-columns:minmax(0,1fr) 110px; gap:12px; }
  .flow-tools { display:block; }
  .flow-tools .hint { max-width:none; margin:9px 0; }
  .flow-count-row strong { font-size:13px; }
  .flow-count-field .input { font-size:16px!important; padding:8px!important; }
  .flow-review-summary { align-items:flex-start; flex-direction:column; gap:5px; }
  .flow-review-row { flex-wrap:wrap; gap:8px; }
  .flow-two-fields { grid-template-columns:minmax(90px,.8fr) minmax(0,1.2fr); gap:10px; }
  .flow-dialog .dialog__footer { flex-wrap:wrap; gap:8px!important; }
  .flow-dialog .dialog__footer .btn--primary { flex:1 0 100%; order:-1; }
  .flow-stepper > * { padding:9px 4px; font-size:13px; }
  .flow-loss-history { padding:14px; }
  .flow-loss-history .flow-review-row > :last-child { flex-basis:100%; max-width:none; }
  #upsellerProcessDialog .dialog__footer .btn { min-width:0; flex:1; font-size:13px!important; padding:10px 8px!important; }
}
@media (prefers-reduced-motion:reduce) { .flow-dialog * { scroll-behavior:auto!important; } }

#flowReceiveBalance { margin-top:14px!important; line-height:1.6; }
@media (max-width:767px) {
  .flow-dialog .flow-count-row { grid-template-columns:minmax(0,1fr) 130px; }
  #flowLossDialog .flow-two-fields { grid-template-columns:1fr; }
}

#upsellerProcessDialog:is([data-pack-stage="1"],[data-pack-stage="2"]) :is(.upseller-process__summary,.dialog-section__title,.flow-source-details) { display:none!important; }
.flow-source-details { margin-top:12px; border:1px solid var(--ds-border); border-radius:10px; overflow:hidden; }
.flow-source-details > summary { padding:12px 14px; color:var(--ds-muted); font-size:13px; cursor:pointer; }
.flow-source-details .upseller-process__source-items { margin:0!important; border:0!important; border-top:1px solid var(--ds-border)!important; border-radius:0!important; }
.flow-source-details .upseller-process__source-title { display:none; }
#flowPackReview > .dialog-note { margin-top:14px; line-height:1.6; }
#stockView > .flow-toolbar { margin:12px 26px 0; }
@media (max-width:1199px) { #stockView > .flow-toolbar { margin-inline:18px; } }
@media (max-width:767px) { #stockView > .flow-toolbar { margin:4px 12px 0; } }

/* Keep the task, the quantity and the next action together while packing. */
#upsellerProcessDialog[data-pack-stage]:not([data-pack-stage="view"]) :is(.dialog__eyebrow,.upseller-process__summary,.dialog-section__title) { display:none!important; }
#upsellerProcessDialog[data-pack-stage]:not([data-pack-stage="view"]) > .dialog__header { padding:16px 20px!important; gap:12px; }
#upsellerProcessDialog[data-pack-stage] > .dialog__content { padding:16px 20px!important; gap:12px!important; }
#upsellerProcessDialog[data-pack-stage] .dialog__subtitle { font-size:13px; }
.flow-pack-context { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; font-size:14px; line-height:1.5; }
.flow-pack-context strong { overflow-wrap:anywhere; min-width:0; color:var(--ds-text); }
.flow-pack-context span { color:var(--ds-muted); font-size:13px; }
.flow-pack-status { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; margin:5px 0 9px; }
.flow-pack-status .flow-pack-progress { margin:0; font-size:13px; }
#flowPackQueue { color:var(--ds-muted); font-size:13px; }
#flowPackQueue:empty { display:none; }
#flowPackMeter { display:block; width:100%; height:4px; appearance:none; border:0; border-radius:10px; overflow:hidden; background:var(--ds-border); }
#flowPackMeter::-webkit-progress-bar { background:var(--ds-border); border-radius:10px; }
#flowPackMeter::-webkit-progress-value { background:var(--ds-accent); border-radius:10px; }
#flowPackMeter::-moz-progress-bar { background:var(--ds-accent); border-radius:10px; }
#flowPackSteps { margin:12px 0 0; gap:2px; padding:3px; border-radius:10px; }
#flowPackSteps > button { min-height:44px; padding:8px 6px; font-size:13px; }
#flowPackOrderDetails { margin:0; }
#flowPackOrderDetails > summary { min-height:44px; padding:12px; font-size:13px; }
#flowPackOrderDetails > summary:focus-visible { outline:2px solid var(--ds-accent); outline-offset:-3px; }
#upsellerProcessDialog #flowPackOrderDetails .upseller-process__info { padding:12px; border-top:1px solid var(--ds-border); }
#upsellerProcessDialog #flowPackOrderDetails .upseller-process__source-items { margin-top:12px!important; padding:12px 0 0; }
#upsellerProcessDialog[data-pack-stage] .upseller-process__item-name { font-size:14px; line-height:1.45; }
#upsellerProcessDialog[data-pack-stage] .upseller-process__item-stock { font-size:13px; }
#upsellerProcessDialog[data-pack-stage] .upseller-process__item-img { width:56px; height:56px; }
#upsellerProcessDialog[data-pack-stage] .upseller-process__item { grid-template-columns:56px minmax(0,1fr) 78px; gap:12px; padding:12px; }
#upsellerProcessDialog .upseller-process__list [data-product] .upseller-process__item-qty-wrap { flex-direction:column; gap:4px; }
#upsellerProcessDialog .upseller-process__list [data-product] .upseller-process__item-qty-wrap::before { content:"Qtd."; font-size:12px; color:var(--ds-muted); }
#upsellerProcessDialog .upseller-process__list [data-product] .upseller-process__item-qty-sign { display:none; }
#upsellerProcessDialog .flow-pack-check { color:var(--ds-muted); }
#upsellerProcessDialog .flow-pack-check:has(input:checked) { background:var(--ds-soft); }
.flow-session-log small { display:block; color:var(--ds-muted); font-size:13px; margin-top:3px; }
.flow-dialog :is(.dialog-note,.hint) { font-size:13px; line-height:1.5; }
.flow-count-row strong,.flow-review-row strong,.flow-search-result strong { font-size:14px; }
.flow-count-field { font-size:12px; }
.flow-dialog .flow-count-row { padding:11px 0; }
@media (min-width:768px) {
  #upsellerProcessDialog[data-pack-stage] { height:fit-content!important; }
}
@media (max-width:767px) {
  #upsellerProcessDialog[data-pack-stage]:not([data-pack-stage="view"]) { inset:0!important; width:100%!important; max-width:100%!important; height:100dvh!important; max-height:100dvh!important; border:0!important; border-radius:0!important; padding-top:env(safe-area-inset-top)!important; }
  html.kb-open #upsellerProcessDialog[data-pack-stage]:not([data-pack-stage="view"]) { height:calc(100dvh - var(--kb-offset,0px))!important; max-height:calc(100dvh - var(--kb-offset,0px))!important; }
  #upsellerProcessDialog[data-pack-stage]:not([data-pack-stage="view"]) .dialog__subtitle { display:none; }
  #upsellerProcessDialog[data-pack-stage]:not([data-pack-stage="view"]) > .dialog__header { align-items:center; padding:12px 14px!important; }
  #upsellerProcessDialog[data-pack-stage] > .dialog__content { padding:12px!important; gap:12px!important; }
  #upsellerProcessDialog[data-pack-stage] .upseller-process__item { grid-template-columns:44px minmax(0,1fr) 60px; gap:8px; padding:10px; }
  #upsellerProcessDialog[data-pack-stage] .upseller-process__item-img { width:44px; height:52px; object-fit:cover; }
  #upsellerProcessDialog[data-pack-stage] .upseller-process__item-qty-wrap { grid-column:3; grid-row:1; justify-content:center; gap:0; }
  #upsellerProcessDialog[data-pack-stage] .upseller-process__item-qty-input { width:60px; min-width:0; font-size:18px!important; padding:6px!important; }
  #upsellerProcessDialog[data-pack-stage] .upseller-process__item-qty-sign { display:none; }
  #upsellerProcessDialog[data-pack-stage] .upseller-process__item-name { font-size:14px; }
  #upsellerProcessDialog[data-pack-stage] .upseller-process__item-stock { font-size:12px; }
  #upsellerProcessDialog[data-pack-stage] .upseller-process__insumo-item { grid-template-columns:40px minmax(0,1fr); }
  #upsellerProcessDialog[data-pack-stage] .upseller-process__insumo-item .upseller-process__item-qty-wrap { grid-column:2; grid-row:2; justify-content:flex-start; }
  #upsellerProcessDialog[data-pack-stage] .upseller-process__item.is-unmapped { grid-template-columns:minmax(0,1fr); }
  #upsellerProcessDialog .dialog__footer .btn { font-size:13px!important; }
  .flow-count-row strong { font-size:14px; }
  .flow-session-log > div { flex-wrap:wrap; gap:6px 10px; }
  .flow-session-log > div > span { min-width:130px; }
  .flow-session-log time { white-space:nowrap; }
}

/* Reserve the same frame before and after the barcode lookup. */
@media(min-width:768px){dialog#upsellerProcessDialog[data-pack-stage]{height:min(880px,calc(100dvh - 48px))!important;max-height:min(880px,calc(100dvh - 48px))!important}}
#upsellerProcessDialog>.scan-conference-footer{display:none!important}
#upsellerProcessDialog.is-scan-loading>.dialog__content:not(.scan-conference-skeleton),#upsellerProcessDialog.is-scan-loading>.dialog__footer:not(.scan-conference-footer){display:none!important}
#upsellerProcessDialog.is-scan-loading>.scan-conference-skeleton{display:flex!important;flex-direction:column;min-height:0;flex:1 1 auto;padding:16px 20px;gap:12px}
#upsellerProcessDialog.is-scan-loading>.scan-conference-footer{display:flex!important}
#upsellerProcessDialog .scan-skeleton-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:12px 0 0;gap:2px;padding:3px;border-radius:10px}
#upsellerProcessDialog .scan-skeleton-steps button{min-height:44px;padding:8px 6px;font-size:13px;opacity:1}
#upsellerProcessDialog .scan-skeleton-meter{height:4px;border-radius:10px;background:var(--ds-border)}
#upsellerProcessDialog .scan-skeleton-line{margin-bottom:0}
#upsellerProcessDialog .scan-skeleton-image{flex:none}
#upsellerProcessDialog .scan-skeleton-check{grid-column:1/-1;margin-top:0;height:44px}
#upsellerProcessDialog .scan-skeleton-qty{width:70px;height:46px}
@media(max-width:767px){#upsellerProcessDialog.is-scan-loading>.scan-conference-skeleton{padding:12px!important}#upsellerProcessDialog .scan-skeleton-qty{width:60px}}

#upsellerProcessDialog:not(.is-scan-loading)>.scan-conference-skeleton{display:none!important}

/* The placeholder shares the exact typography of the resolved order header. */
#upsellerProcessDialog .scan-conference-skeleton .flow-pack-context strong{font:inherit;font-weight:700}
#upsellerProcessDialog .scan-conference-skeleton .flow-pack-status{line-height:inherit}

/* Placeholder cards use the real row, controls and check-label layout. */
#upsellerProcessDialog .scan-skeleton-placeholder{color:transparent!important;background:linear-gradient(100deg,#263239 20%,#34434a 45%,#263239 70%);background-size:250% 100%;animation:scan-skeleton-shimmer 1.4s ease infinite;border-radius:5px;user-select:none}
#upsellerProcessDialog .scan-conference-skeleton .upseller-process__item-name{display:block;width:80%}
#upsellerProcessDialog .scan-conference-skeleton .upseller-process__item-stock{display:block;width:58%}
#upsellerProcessDialog .scan-conference-skeleton .flow-pack-check{cursor:default}
@media(prefers-reduced-motion:reduce){#upsellerProcessDialog .scan-skeleton-placeholder{animation:none}}