/* cargo-searates-row-layout-local */
:root {
  --cargo-soft-blue: #eaf6ff;
  --cargo-line: #d8e0e8;
  --cargo-muted: #9aaebe;
  --cargo-ink: #10233a;
}

.cargo-stage-products .cargo-optimizer-workspace > .useful-tool-card:first-child {
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.06) !important;
  padding: clamp(0.72rem, 1.05vw, 1rem) !important;
}

.cargo-stage-products .useful-tool-heading {
  align-items: center !important;
  margin-bottom: 0.48rem !important;
}

.cargo-stage-products .useful-tool-heading p {
  max-width: 58rem !important;
  font-size: 0.83rem !important;
  line-height: 1.35 !important;
}

.cargo-stage-products .mt-4.space-y-3 {
  display: grid !important;
  gap: 0 !important;
  overflow-x: auto !important;
  padding-bottom: 0.3rem !important;
}

.cargo-stage-products .optimizer-item-card {
  display: grid !important;
  grid-template-columns:
    minmax(5.7rem, 0.56fr)
    minmax(11.5rem, 1.12fr)
    minmax(7rem, 0.66fr)
    minmax(7rem, 0.66fr)
    minmax(7rem, 0.66fr)
    minmax(7.2rem, 0.68fr)
    minmax(7rem, 0.66fr)
    minmax(7.8rem, 0.7fr)
    minmax(8rem, 0.76fr)
    minmax(4.2rem, auto) !important;
  grid-template-rows: auto auto auto !important;
  gap: 0.38rem 0.36rem !important;
  align-items: center !important;
  min-width: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cargo-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 0.48rem 0.2rem 0.52rem !important;
}

.cargo-stage-products .optimizer-item-card:first-child {
  border-top: 1px solid var(--cargo-line) !important;
}

.cargo-stage-products .optimizer-item-card-head,
.cargo-stage-products .optimizer-item-main-grid,
.cargo-stage-products .optimizer-item-dimension-grid,
.cargo-stage-products .optimizer-item-footer {
  display: contents !important;
}

.cargo-stage-products .optimizer-item-card-head > div:first-child {
  grid-column: 1 / 3 !important;
  grid-row: 1 !important;
  display: inline-flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 0.5rem !important;
  overflow: visible !important;
}

.cargo-stage-products .optimizer-item-card-head > div:first-child::before {
  content: "";
  display: inline-grid;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d9e3ee;
  border-radius: 0.6rem;
  background:
    linear-gradient(135deg, transparent 45%, rgba(148, 163, 184, 0.28) 46% 54%, transparent 55%),
    linear-gradient(45deg, rgba(14, 125, 197, 0.09), #fff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85);
}

.cargo-stage-products .optimizer-item-card-head > div:first-child span {
  margin: 0 !important;
  color: var(--cargo-muted) !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.08em !important;
}

.cargo-stage-products .optimizer-item-card-head > div:first-child b {
  max-width: 16rem !important;
  color: var(--cargo-ink) !important;
  font-size: 0.82rem !important;
}

.cargo-stage-products .optimizer-item-card-metrics {
  grid-column: 3 / 10 !important;
  grid-row: 1 !important;
  display: flex !important;
  min-width: 0 !important;
  justify-content: flex-start !important;
  gap: 0.24rem !important;
}

.cargo-stage-products .optimizer-item-card-metrics em,
.cargo-stage-products .optimizer-line-color {
  min-height: 1.48rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(14, 125, 197, 0.12) !important;
  background: var(--cargo-soft-blue) !important;
  color: #0473b6 !important;
  padding: 0.18rem 0.4rem !important;
  font-size: 0.6rem !important;
}

.cargo-stage-products .optimizer-line-status {
  background: #e9fbf3 !important;
  color: #057a55 !important;
}

.cargo-stage-products .optimizer-line-status.is-unloaded {
  background: #fff2e7 !important;
  color: #b4440b !important;
}

.cargo-stage-products .optimizer-line-color input {
  width: 1rem !important;
  height: 1rem !important;
}

.cargo-stage-products .optimizer-row-tools {
  grid-column: 10 !important;
  grid-row: 1 / 3 !important;
  display: inline-flex !important;
  justify-self: end !important;
  align-self: center !important;
  gap: 0.18rem !important;
}

.cargo-stage-products .optimizer-row-tools button {
  width: 1.85rem !important;
  min-width: 1.85rem !important;
  height: 1.85rem !important;
  min-height: 1.85rem !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
}

.cargo-stage-products .optimizer-row-tools button:first-child {
  background: #e8e9ff !important;
  color: #1688f6 !important;
}

.cargo-stage-products .optimizer-row-tools button:last-child {
  background: #fff0f0 !important;
  color: #f01824 !important;
}

.cargo-stage-products .optimizer-item-main-grid > *,
.cargo-stage-products .optimizer-item-dimension-grid > *,
.cargo-stage-products .optimizer-item-footer > * {
  min-width: 0 !important;
}

.cargo-stage-products .optimizer-item-main-grid > :nth-child(1) { grid-column: 1 !important; grid-row: 2 !important; }
.cargo-stage-products .optimizer-item-main-grid > :nth-child(2) { grid-column: 2 !important; grid-row: 2 !important; }
.cargo-stage-products .optimizer-item-main-grid > :nth-child(3) { grid-column: 2 / 4 !important; grid-row: 3 !important; }
.cargo-stage-products .optimizer-item-main-grid > :nth-child(4) { grid-column: 7 !important; grid-row: 2 !important; }
.cargo-stage-products .optimizer-item-main-grid > :nth-child(5) { grid-column: 6 !important; grid-row: 2 !important; }
.cargo-stage-products .optimizer-item-dimension-grid > :nth-child(1) { grid-column: 3 !important; grid-row: 2 !important; }
.cargo-stage-products .optimizer-item-dimension-grid > :nth-child(2) { grid-column: 4 !important; grid-row: 2 !important; }
.cargo-stage-products .optimizer-item-dimension-grid > :nth-child(3) { grid-column: 5 !important; grid-row: 2 !important; }
.cargo-stage-products .optimizer-item-dimension-grid > :nth-child(4) { grid-column: 4 !important; grid-row: 3 !important; }
.cargo-stage-products .optimizer-item-footer > :nth-child(1) { grid-column: 8 / 10 !important; grid-row: 2 !important; }
.cargo-stage-products .optimizer-item-footer > :nth-child(2) { grid-column: 5 / 10 !important; grid-row: 3 !important; }

.cargo-stage-products .optimizer-item-card label:not(.optimizer-stackable-toggle) {
  display: grid !important;
  gap: 0.14rem !important;
  color: var(--cargo-muted) !important;
  font-size: 0.66rem !important;
  font-weight: 850 !important;
}

.cargo-stage-products .optimizer-item-card :is(input:not([type="checkbox"]):not([type="color"]), select) {
  min-height: 2.12rem !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 0.76rem !important;
  background: #fff !important;
  color: #2c3037 !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.025) !important;
  font-size: 0.8rem !important;
  font-weight: 750 !important;
  padding-inline: 0.66rem !important;
}

.cargo-stage-products .optimizer-item-toggles {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 0.35rem !important;
}

.cargo-stage-products .optimizer-stackable-toggle {
  min-height: 2.12rem !important;
  border-color: #e5e7f8 !important;
  border-radius: 0.76rem !important;
  background: #f8fbff !important;
  color: var(--cargo-ink) !important;
  padding-inline: 0.54rem !important;
  font-size: 0.69rem !important;
}

.cargo-stage-products .optimizer-actions {
  justify-content: flex-start !important;
  padding-top: 0.58rem !important;
}

.cargo-stage-products .optimizer-actions .mt-button {
  min-width: 9rem !important;
  border-radius: 0.65rem !important;
  min-height: 2.25rem !important;
  font-size: 0.76rem !important;
}

/* cargo-transport-result-polish-local: keep existing sea container and truck images visible. */
.cargo-stage-transport .cargo-optimizer-sidebar {
  width: min(100%, 1320px) !important;
}

.cargo-stage-transport .cargo-optimizer-sidebar > .useful-tool-card:nth-child(2) {
  border: 0 !important;
  border-radius: 0.35rem !important;
  background: #fff !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.06) !important;
  padding: clamp(1.2rem, 2vw, 2rem) !important;
}

.cargo-stage-transport .transport-mode-switch {
  grid-template-columns: repeat(2, minmax(12rem, 19rem)) !important;
  justify-content: start !important;
  gap: 1rem !important;
}

.cargo-stage-transport .transport-mode-switch button {
  min-height: 4.4rem !important;
  border: 0 !important;
  border-radius: 0.45rem !important;
  background: #0b8ff2 !important;
  color: #fff !important;
  box-shadow: 0 18px 32px rgba(14, 125, 197, 0.25) !important;
}

.cargo-stage-transport .transport-unit-compact-preview {
  grid-template-columns: minmax(18rem, 0.42fr) minmax(0, 0.58fr) !important;
  min-height: 24rem !important;
  border: 0 !important;
  border-radius: 0.35rem !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.68) !important;
}

.cargo-stage-transport .transport-unit-compact-preview .transport-unit-sketch {
  min-height: 23rem !important;
  border-inline-end: 1px solid var(--cargo-line) !important;
}

.cargo-stage-transport .transport-unit-image {
  max-height: 21rem !important;
}

.cargo-stage-result .cargo-optimizer-workspace {
  width: min(100%, 1360px) !important;
}

.cargo-stage-result .useful-tool-card {
  border-radius: 0.35rem !important;
}

.cargo-stage-result .stuffing-step-tabs,
.cargo-workflow-tabs {
  border-radius: 0.35rem !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05) !important;
}

.cargo-stage-result .stuffing-unit-strip,
.cargo-stage-result .stuffing-result-card {
  border-radius: 0.35rem !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06) !important;
}

@media (max-width: 900px) {
  .cargo-stage-products .optimizer-item-card {
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    border: 1px solid rgba(226, 232, 240, 0.92) !important;
    border-radius: 0.82rem !important;
    padding: 0.72rem !important;
  }

  .cargo-stage-products .optimizer-item-card-head,
  .cargo-stage-products .optimizer-item-main-grid,
  .cargo-stage-products .optimizer-item-dimension-grid,
  .cargo-stage-products .optimizer-item-footer {
    display: grid !important;
    grid-column: 1 / -1 !important;
  }

  .cargo-stage-products .optimizer-item-card-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .cargo-stage-products .optimizer-item-main-grid,
  .cargo-stage-products .optimizer-item-dimension-grid,
  .cargo-stage-products .optimizer-item-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }

  .cargo-stage-products .optimizer-item-card-head > div:first-child,
  .cargo-stage-products .optimizer-item-card-metrics,
  .cargo-stage-products .optimizer-row-tools,
  .cargo-stage-products .optimizer-item-main-grid > *,
  .cargo-stage-products .optimizer-item-dimension-grid > *,
  .cargo-stage-products .optimizer-item-footer > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .cargo-stage-products .optimizer-item-card-metrics {
    grid-column: 1 / -1 !important;
    order: 3 !important;
  }

  .cargo-stage-products .optimizer-row-tools {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .cargo-stage-products .optimizer-item-footer > :nth-child(1),
  .cargo-stage-products .optimizer-item-footer > :nth-child(2) {
    grid-column: 1 / -1 !important;
  }

  .cargo-stage-transport .transport-mode-switch,
  .cargo-stage-transport .transport-unit-compact-preview {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}