/* The rectangle always represents the footprint, including stacked cargo. */
/* Draw the perimeter inside the unscaled shell, above the isolated cargo layer. */
#cargoAreasContainer .cargo-area-shell {
  isolation: isolate;
  border-radius: 3px !important;
}
#cargoAreasContainer .cargo-area { isolation: isolate; }
#cargoAreasContainer .cargo-area-shell::after,
#cargoAreasContainer > .cargo-sheet:not(.staging-sheet) .cargo-area-shell::after,
#cargoAreasContainer > .cargo-sheet.local-temp-sheet .cargo-area-shell::after,
#cargoAreasContainer > .cargo-sheet:not(.staging-sheet) .local-temp-sheet .cargo-area-shell::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 3px !important;
  box-shadow: inset 0 0 0 1px #334155 !important;
  pointer-events: none;
  z-index: 100 !important;
}
html[data-theme="dark"] #cargoAreasContainer .cargo-area-shell::after {
  box-shadow: inset 0 0 0 1px #94a3b8 !important;
}
/* Coordinates use centimetres: grid guides every 20 cm on both axes. */
#cargoAreasContainer .cargo-sheet {
  --area-surface: #fcfdff;
  --area-guide: rgba(71, 85, 105, .10);
}
#cargoAreasContainer .local-temp-sheet, #cargoAreasContainer .staging-sheet {
  --area-surface: #f0f5fa;
}
#cargoAreasContainer .cargo-sheet .cargo-area[data-area-id][data-area-id] {
  background-color: var(--area-surface) !important;
  background-image:
    linear-gradient(to right, var(--area-guide) 1px, transparent 1px),
    linear-gradient(to bottom, var(--area-guide) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
  background-position: 0 0 !important;
}
#cargoAreasContainer .cargo-area .meter-line {
  border-left: 1px solid var(--area-guide) !important;
}
#cargoAreasContainer .local-temp-sheet .meter-line,
#cargoAreasContainer .staging-sheet .meter-line {
  height: 10px !important;
  border-left-color: rgba(71, 85, 105, .25) !important;
}
#cargoAreasContainer .cargo-area .ralla-zone { background: rgba(59, 130, 246, .045); border-color: rgba(59, 130, 246, .22); }
#cargoAreasContainer .cargo-area .tridem-zone { background: rgba(239, 68, 68, .055); border-color: rgba(239, 68, 68, .25); }
html[data-theme="dark"] #cargoAreasContainer .cargo-sheet { --area-surface: #142033; --area-guide: rgba(203, 213, 225, .12); }
html[data-theme="dark"] #cargoAreasContainer .local-temp-sheet,
html[data-theme="dark"] #cargoAreasContainer .staging-sheet { --area-surface: #1b2b40; }
.cargo-area .item {
  background: color-mix(in srgb, color-mix(in srgb, var(--cargo-accent, #2563eb) 25%, #fff) 55%, transparent) !important;
  border: 1.5px solid var(--cargo-accent, #2563eb) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  color: #243347 !important;
  padding: 5px;
  container-type: size;
}
.cargo-area .item.selected {
  background: rgba(253, 230, 167, .55) !important;
  color: #33270f !important;
  outline: none !important;
  box-shadow: none !important;
}
.cargo-area .item.selected::before {
  content: '';
  display: block !important;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 3px;
  background:
    linear-gradient(#805500, #805500) left top / min(12px, 25%) 3px,
    linear-gradient(#805500, #805500) left top / 3px min(12px, 25%),
    linear-gradient(#805500, #805500) right top / min(12px, 25%) 3px,
    linear-gradient(#805500, #805500) right top / 3px min(12px, 25%),
    linear-gradient(#805500, #805500) left bottom / min(12px, 25%) 3px,
    linear-gradient(#805500, #805500) left bottom / 3px min(12px, 25%),
    linear-gradient(#805500, #805500) right bottom / min(12px, 25%) 3px,
    linear-gradient(#805500, #805500) right bottom / 3px min(12px, 25%);
  background-repeat: no-repeat;
  mix-blend-mode: normal;
  box-shadow: none;
  z-index: 4;
  pointer-events: none;
}
.cargo-area .item-copy { min-width: 0; width: 100%; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.cargo-area .item-name { font-size: 12px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cargo-area .item-dimensions, .cargo-area .item-weight { font-size: 10px; font-weight: 400; line-height: 1.25; }
.cargo-area .item-weight { display: none; }
.cargo-area .item.selected .item-weight { display: block; }
.cargo-area .item-compact .item-dimensions { display: none; }
.cargo-area .is-stack { padding-top: 27px; }
.cargo-area .item .stack-badge {
  position: absolute !important; inset: 4px auto auto 4px; z-index: 3;
  min-height: 0; max-width: calc(100% - 8px); margin: 0;
  border: 1px solid #cbd5e1 !important; border-radius: 4px !important;
  background: #fff !important; color: #334155 !important;
  padding: 3px 5px; font: 600 10px/1.2 system-ui; letter-spacing: 0;
  box-shadow: none !important; pointer-events: auto; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cargo-area .item .stack-badge:focus-visible { outline: 2px solid #2563eb; }
.cargo-area .item .lock-badge { font-size: 9px; padding: 2px; top: auto; bottom: 3px; }
.cargo-area .item.stack-target-pending, .cargo-area .item.stack-target-ready { outline: 2px solid #2563eb !important; outline-offset: -2px !important; }
.cargo-area .item.stack-target-pending::after, .cargo-area .item.stack-target-ready::after { display: none !important; }
.cargo-area .item.drag-stack-pending, .cargo-area .item.drag-stack-ready { opacity: .65; }
.cargo-area .item.drag-invalid { outline: 1px dashed #dc2626 !important; outline-offset: -1px !important; }
.cargo-drag-feedback {
  position: absolute; z-index: 70; pointer-events: none;
  max-width: calc(100% - 8px); padding: 6px 9px 9px;
  background: #fff; color: #1e40af; border: 1px solid #93b4e8;
  border-radius: 5px; font: 600 11px/1.3 system-ui;
}
.cargo-drag-feedback::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--stack-progress, 100%); background: #2563eb; }
.cargo-drag-feedback.is-error { color: #b91c1c; border-color: #f1a7a7; }
.cargo-drag-feedback.is-error::after { display: none; }
.cargo-drag-feedback.is-pending::after { animation: cargo-stack-progress var(--stack-delay, 1s) linear var(--stack-elapsed, 0ms) both; }
@keyframes cargo-stack-progress { from { width: 0; } to { width: 100%; } }
.cargo-collision-patch { position: absolute; pointer-events: none; z-index: 45; background: #ef444430; border: 1px solid #dc2626; box-sizing: border-box; }
html[data-theme="dark"] .cargo-area .item { background: color-mix(in srgb, color-mix(in srgb, var(--cargo-accent, #60a5fa) 30%, #142033) 55%, transparent) !important; color: #e2e8f0 !important; }
html[data-theme="dark"] .cargo-area .item.selected { background: rgba(253, 230, 167, .55) !important; color: #33270f !important; }
html[data-theme="dark"] .cargo-area .item .stack-badge, html[data-theme="dark"] .cargo-drag-feedback { background: #18263b !important; color: #e2e8f0 !important; }
@container (max-width: 65px) { .item-dimensions { display: none; } }
@container (max-height: 45px) { .item-dimensions, .item-weight { display: none !important; } }
@media print { .cargo-drag-feedback, .cargo-collision-patch { display: none; } }