/* Plugin wrapper */
.rpa-wrap {
  padding: 20px;
  box-sizing: border-box;
}

/* The map container */
#rpa-map {
  width:100%;
  height:80vh;
  background:#ccc; /* fallback */
}

/* The unassigned panel => containing the header + #rpa-unassigned-orders-list */
#rpa-unassigned-panel {
  position: relative;
  margin-bottom:15px;
}

/* The container with search & button at top, plus the actual items list */
#rpa-unassigned-orders {
  border:1px solid #999;
  padding:10px;
  position:relative;
  min-height:100px;
  background:#f9f9f9;
}
.unassigned-header {
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-bottom:10px;
}
#rpa-delete-selected {
  background:#d9534f;
  color:#fff;
  border:1px solid #d43f3a;
  border-radius:4px;
  cursor:pointer;
  margin-left:10px;
}
#rpa-delete-selected:hover {
  background:#c12e2a;
}

/* The subcontainer for the unassigned order items themselves */
#rpa-unassigned-orders-list {
  /* We only place the .order-item elements here */
}

/* Bin/trash if used */
#rpa-bin {
  margin-top:20px;
  padding:10px;
  background-color:#ffe6e6;
  border:1px dashed #f00;
  text-align:center;
  color:#f00;
}

/* Calendar layout */
.calendar {
  display:flex;
  flex-direction:column;
}
.calendar-row {
  display:flex;
  flex-direction:row;
}
.calendar-day {
  flex:1;
  margin:5px;
  padding:10px;
  background-color:#f9f9f9;
  border:1px solid #ddd;
}
.calendar-day h4 {
  margin-top:0;
}
.order-list {
  min-height:80px;
  background:#fff;
  padding:5px;
  border:1px solid #ddd;
}

/* Orders */
.order-item {
  margin:5px 0;
  padding:10px;
  background-color:#e9e9e9; /* fallback if assigned (JS overrides if unassigned => #ffffcc) */
  border:1px solid #ccc;
  border-radius:4px;
  cursor:grab;
  user-select:none;
  touch-action:none;
}
.order-item.selected {
  border:2px solid #4a3b57;
}

/* Multi-drag helper & ephemeral clones */
.multi-drag-helper {
  position:relative;
  background:transparent;
  padding:0;
  border:none;
  box-shadow:none;
}
.multi-drag-helper .order-item {
  border:1px solid #ccc;
  background:#fafafa;
  margin:0;
  padding:5px;
}
.dragging-square {
  opacity:0.95;
  pointer-events:none;
  overflow:visible;
  border:none;
}

/* Plate tabs, eye icons, etc. */
.number-plate-tabs {
  display:flex;
  margin-bottom:20px;
}
.number-plate-tab {
  display:inline-block;
  margin-right:5px;
  padding:10px 15px;
  cursor:pointer;
  background:#e9e9e9;
  border:1px solid #ccc;
  border-radius:4px;
}
.number-plate-tab.active {
  background:#d9d9d9;
  font-weight:bold;
}
.number-plate-section {
  display:none;
}
.number-plate-section.active {
  display:block;
}
.number-plate-eye-icon {
  cursor:pointer;
  margin-left:10px;
  vertical-align:middle;
}
.number-plate-eye-icon.active {
  color:#0073aa;
}

/* Mobile layout */
@media(max-width:768px){
  .calendar-row {
    overflow-x:auto;
    scroll-snap-type:x mandatory;
  }
  .calendar-day {
    flex:0 0 50%;
    scroll-snap-align:start;
    border-right:1px solid #ccc;
  }
  #rpa-map {
    height:60vh !important;
  }
  .order-item {
    cursor:default;
  }
}