.rack-color-red { --rack-accent: #ff4d4f; }
.rack-color-orange { --rack-accent: #ff922b; }
.rack-color-yellow { --rack-accent: #ffc928; }
.rack-color-green { --rack-accent: #40c963; }
.rack-color-blue { --rack-accent: #3b82f6; }
.rack-color-purple { --rack-accent: #a85ad4; }
.rack-color-graphite { --rack-accent: #2f333a; }

/* Keep both parts of the rack sign vertically centered in every state,
   including the default state with no color selected. */
.warehouse-rack-sign {
  min-height: 36px;
  align-items: center;
}

.warehouse-rack-sign span,
.warehouse-rack-sign strong {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  line-height: 1;
}

/* The larger rack name/number has different font metrics than the small
   "Стеллаж" caption. Lift it slightly for optical, not just box, centering. */
.warehouse-rack-sign strong {
  transform: translateY(-3px);
}

/* Physical-style rack sign: balanced vertically and colored as the real label. */
.warehouse-rack[class*="rack-color-"] .warehouse-rack-sign {
  padding: 6px 11px;
  background: var(--rack-accent);
}

.warehouse-rack[class*="rack-color-"] .warehouse-rack-sign span,
.warehouse-rack[class*="rack-color-"] .warehouse-rack-sign strong {
  color: #fff;
}

/* Replace the full-width accent with a centered 50% marker. */
.warehouse-rack[class*="rack-color-"] .warehouse-rack-header {
  position: relative;
  box-shadow: none;
}

.warehouse-rack[class*="rack-color-"] .warehouse-rack-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  width: 50%;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--rack-accent);
  pointer-events: none;
}

/* Shelf numbers mirror the physical color stickers. */
.warehouse-rack[class*="rack-color-"] .warehouse-shelf:not(.is-unassigned) .warehouse-shelf-sign strong {
  border-color: rgba(0, 0, 0, .12);
  background: var(--rack-accent);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}