body { 
  font-family: 'Roboto', sans-serif; 
  background: #f7f7e7; 
  margin: 0; 
}

.container { 
  max-width: 1200px; 
  margin: 40px auto; 
  background: #fff; 
  border-radius: 12px; 
  padding: 2em; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  position: relative;
}

h2 { text-align: center; }

.toolbar { 
  text-align: center; 
  margin-bottom: 1em; 
}

.toolbar button { 
  margin: 0 0.5em; 
}

.grid-controls { 
  text-align: center; 
  margin-bottom: 1em; 
}

.grid-controls input { 
  width: 60px; 
  padding: 0.5em; 
  border-radius: 4px; 
  border: 1px solid #ccc; 
  margin: 0 0.5em; 
}

.grid-controls button { 
  background: #1976d2; 
  color: #fff; 
  border: none; 
  border-radius: 4px; 
  padding: 0.5em 1em; 
  cursor: pointer; 
}

.grid-wrapper { 
  overflow: auto; 
  border: 1px solid #ccc; 
  background: #fafafa; 
  position: relative;
  padding: 1px;  /* Add padding to account for cell margins */
}

.grid-table { 
  border-collapse: separate;  /* Change from collapse to separate */
  border-spacing: 0;  /* Remove spacing between cells */
  margin: 2em auto; 
}

.grid-table th, 
.grid-table td { 
  text-align: center; 
}

.grid-table th { 
  background: #e0e0e0; 
  font-weight: bold; 
}

.cell {
  background: #e0f7fa;
  border: 1px solid #b2ebf2;
  width: 32px; height: 32px;
  min-width: 32px; min-height: 32px;
  cursor: pointer;
  font-size: 0.8em;
  position: relative;
  transition: background 0.2s;
  user-select: none;
}

.cell.planter-0 { 
  background: rgba(33, 150, 243, 0.7) !important; 
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Planter border styles */
.cell.planter-top { border-top: 2px solid black !important; }
.cell.planter-left { border-left: 2px solid black !important; }
.cell.planter-bottom { border-bottom: 2px solid black !important; }
.cell.planter-right { border-right: 2px solid black !important; }

.cell.selected { 
  background: #81d4fa !important; 
}

.cell.selected-planter {
  outline: 2px solid #1976d2;
  outline-offset: -2px;
  position: relative;
}

.cell.selected-planter::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(25, 118, 210, 0.2);
  pointer-events: none;
}

.cell.planter-1 { background: #b2dfdb !important; }
.cell.planter-2 { background: #f8bbd0 !important; }
.cell.planter-3 { background: #c5e1a5 !important; }
.cell.planter-4 { background: #d1c4e9 !important; }
.cell.planter-5 { background: #ffccbc !important; }
.cell.planter-6 { background: #b3e5fc !important; }
.cell.planter-7 { background: #d7ccc8 !important; }
.cell.planter-8 { background: #f0f4c3 !important; }
.cell.planter-9 { background: #f5e1da !important; }

.cell .crop { 
  font-weight: bold; 
  font-size: 0.7em; 
}

.cell .harvest-date { 
  font-size: 0.7em; 
  color: #1976d2; 
}

.cell .countdown { 
  font-size: 0.7em; 
  color: #388e3c; 
}

#planterModalOverlay, 
#plantModalOverlay, 
#versionModalOverlay, 
#lockModalOverlay,
#deleteVersionModalOverlay,
#planterManageModalOverlay {
  display: none; 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  background: rgba(0,0,0,0.4); 
  z-index: 1000; 
  align-items: center; 
  justify-content: center;
}

#planterModal, 
#plantModal, 
#versionModal, 
#lockModal,
#deleteVersionModal,
#planterManageModal {
  background: #fff; 
  padding: 2em; 
  border-radius: 10px; 
  min-width: 250px;
  display: flex; 
  flex-direction: column; 
  gap: 1em;
}

input[type="text"], 
input[type="password"],
input[type="date"],
input[type="url"] {
  padding: 0.5em; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
  width: 100%;
}

button {
  padding: 0.5em; 
  border: none; 
  border-radius: 4px; 
  background: #388e3c; 
  color: #fff; 
  cursor: pointer;
}

button[type="button"] { 
  background: #ccc; 
  color: #333; 
}

#deletePlantsBtn,
#deletePlanterBtn { 
  background: #e74c3c !important; 
  color: #fff; 
}

.axis-label { 
  background: #f5f5f5; 
  font-size: 0.8em; 
  color: #666; 
}

.planter-legend { 
  margin: 1em auto; 
  text-align: center; 
}

.planter-legend span { 
  display: inline-block; 
  margin: 0 1em 0.5em 0; 
  padding: 0.3em 1em; 
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s;
}

.planter-legend span:hover {
  transform: scale(1.05);
}

.planter-legend span.selected {
  outline: 2px solid #1976d2;
  outline-offset: 2px;
}

.drag-window {
  position: absolute;
  border: 2px dashed #1976d2;
  background: rgba(25, 118, 210, 0.08);
  pointer-events: none;
  z-index: 10;
  display: none;
}

.version-controls {
  text-align: center;
  margin: 1em 0;
}

.version-controls select {
  padding: 0.5em;
  border-radius: 4px;
  margin: 0 0.5em;
}

.lock-controls {
  position: absolute;
  top: 1em;
  right: 1em;
}

.lock-controls button {
  background: #ff9800;
  color: white;
}

.locked .cell {
  pointer-events: none;
  opacity: 0.8;
}

.locked button:not(#lockBtn) {
  pointer-events: none;
  opacity: 0.5;
}

#lockBtn {
  z-index: 1000;
  position: relative;
}

.locked #lockBtn {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.version-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5em;
  margin: 0.5em 0;
  background: #f5f5f5;
  border-radius: 4px;
}

.version-item button {
  background: #e74c3c;
  color: white;
  padding: 0.3em 0.8em;
}

.version-list {
  max-height: 300px;
  overflow-y: auto;
  margin: 1em 0;
}

#versionSelect {
  width: 100%;
  margin-bottom: 1em;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 1em 0;
}

.checkbox-label input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.planter-preview {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(25, 118, 210, 0.3);
  border: 2px dashed #1976d2;
  pointer-events: none;
  z-index: 5;
}

#iframeModalOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

#iframeModal {
  background: #fff;
  padding: 2em;
  border-radius: 10px;
  min-width: 500px;
  max-width: 90%;
}

#iframeCode {
  font-family: monospace;
  padding: 1em;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: none;
}

#renameVersionModalOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

#renameVersionModal {
  background: #fff;
  padding: 2em;
  border-radius: 10px;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 1em;
}