.packing-panel {
  width: min(620px, 96vw);
}

.packing-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding-right: 0;
}

.packing-header h2 {
  margin: 0;
  padding-right: 8px;
}


.packing-header #packingCloseButton {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  inset: 0 0 auto auto !important;
  transform: none !important;
  margin: 0 !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  z-index: 20;
}

.packing-top-actions {
  display: flex;
  gap: 8px;
  margin: 10px 0 8px;
   align-items: left;
}

.packing-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  color: var(--brand);
  font-weight: 700;
}

.packing-loading[hidden] {
  display: none !important;
}

.packing-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #cfe4ea;
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: packing-spin 0.8s linear infinite;
}

@keyframes packing-spin {
  to {
    transform: rotate(360deg);
  }
}

.packing-summary,
.packing-form {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 8px 10px;
  align-items: center;
  margin: 12px 0;
}

.packing-summary label,
.packing-form label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.packing-summary strong,
.packing-form strong {
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid #d3e1e8;
  border-radius: 6px;
  background: #f8fbfd;
}

.packing-form input {
  width: 100%;
  box-sizing: border-box;
  min-height: 34px;
  border: 1px solid #bdd5df;
  border-radius: 6px;
  padding: 7px 9px;
  font: inherit;
}

.packing-summary input {
  width: 100%;
  box-sizing: border-box;
  min-height: 34px;
  border: 1px solid #bdd5df;
  border-radius: 6px;
  padding: 7px 9px;
  font: inherit;
}

.packing-form input[readonly] {
  background: #f8fbfd;
  color: var(--ink);
  font-weight: 700;
}

.packing-form select {
  width: 100%;
  box-sizing: border-box;
  min-height: 34px;
  border: 1px solid #bdd5df;
  border-radius: 6px;
  padding: 7px 9px;
  font: inherit;
  background: #ffffff;
}

.packing-summary .ts-wrapper,
.packing-form .ts-wrapper {
  width: 100%;
}

.packing-summary .ts-control,
.packing-summary .ts-control input,
.packing-summary .ts-dropdown,
.packing-form .ts-control,
.packing-form .ts-control input,
.packing-form .ts-dropdown {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.packing-summary .ts-control,
.packing-form .ts-control {
  min-height: 34px;
  border: 1px solid #bdd5df;
  border-radius: 6px;
  padding: 5px 9px;
  background: #ffffff;
  box-shadow: none;
  cursor: text;
}

.packing-summary .ts-control input,
.packing-form .ts-control input {
  min-height: unset;
  border: 0;
  padding: 0;
  background: transparent;
}

.packing-summary .ts-control .item,
.packing-form .ts-control .item {
  font-size: inherit;
  font-family: inherit;
  font-weight: 700;
  line-height: inherit;
}

.packing-summary .ts-dropdown,
.packing-form .ts-dropdown {
  z-index: 9999;
  border: 1px solid #bdd5df;
  border-radius: 6px;
}

.packing-summary .ts-dropdown .option,
.packing-form .ts-dropdown .option {
  padding: 6px 10px;
}

.packing-summary .ts-dropdown .option:hover,
.packing-summary .ts-dropdown .option.active,
.packing-form .ts-dropdown .option:hover,
.packing-form .ts-dropdown .option.active {
  background: #eaf3f7;
  color: inherit;
}

.packing-form .ts-dropdown .option:hover,
.packing-form .ts-dropdown .option.active {
  background: #eaf3f7;
  color: inherit;
}

.packing-sap-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
}

.packing-sap-open-button,
.packing-scan-button {
  min-height: 34px;
  white-space: nowrap;
  padding: 0 10px;
}

.packing-status {
  min-height: 22px;
  color: var(--brand);
  font-weight: 700;
}

.packing-status.error {
  color: #b0182a;
}

.packing-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.packing-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.packing-date-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.packing-date-actions input {
    flex: 1;
}

.packing-avail-inline {
  font-size: 13px;
  font-weight: 700;
  color: #2e7d52;
  padding: 2px 0 4px 2px;
  min-height: 18px;
}

.packing-avail-inline {
  font-size: 13px;
  font-weight: 700;
  color: #2e7d52;
  padding: 2px 0 4px 2px;
  min-height: 18px;
}

#packingReleaseNowButton,
#packingReturnButton,
#packingPackButton {
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

#packingReleaseNowButton:active:not(:disabled),
#packingReturnButton:active:not(:disabled),
#packingPackButton:active:not(:disabled) {
  transform: scale(0.95);
}

.packing-action-busy {
  pointer-events: none;
  opacity: 0.85;
}

.packing-action-busy::after {
  display: inline-block;
  margin-left: 6px;
  will-change: transform;
}

#packingReleaseNowButton.packing-action-busy::after {
  content: "\279C";
  animation: packing-slide-right 0.7s ease-in-out infinite;
}

#packingReturnButton.packing-action-busy::after {
  content: "\21BA";
  animation: packing-spin-ccw 0.8s linear infinite;
}

#packingPackButton.packing-action-busy::after {
  content: "\25A2";
  animation: packing-box-pulse 0.7s ease-in-out infinite;
}

@keyframes packing-slide-right {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(6px); opacity: 0.2; }
}

@keyframes packing-spin-ccw {
  to { transform: rotate(-360deg); }
}

@keyframes packing-box-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}

.packing-success-splash {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 40, 60, 0.35);
}

.packing-success-splash[hidden] {
  display: none !important;
}

.packing-success-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 26px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  animation: packing-pop-in 0.25s ease-out;
}

.packing-success-text {
  font-weight: 600;
  color: #0f5132;
  font-size: 15px;
}

.packing-success-card svg {
  width: 56px;
  height: 56px;
}

.packing-success-card svg .draw {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: packing-draw 0.5s ease-out 0.1s forwards;
}

@keyframes packing-pop-in {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes packing-draw {
  to { stroke-dashoffset: 0; }
}

.packing-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.packing-item-row strong {
  flex: 1;
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid #d3e1e8;
  border-radius: 6px;
  background: #f8fbfd;
}

.packing-item-info-button {
  flex: none;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}

.inline-edit-button.packing-button {
  width: 44px;
  font-size: 12px;
  color: #ffffff;
  background: #1d68b3;
  border-color: #15518e;
}

.inline-edit-button.packing-button:hover,
.inline-edit-button.packing-button:focus {
  background: #155da3;
  outline-color: #9fc7ef;
}

#receivingRows tr.is-notification-target > td,
#itemOrderRows tr.is-notification-target > td {
  background: #fff5c2;
  box-shadow: inset 0 2px #d89b00, inset 0 -2px #d89b00;
}