/* /styles/inSituCreator.css */
/* Standalone styles for In-Situ Creator module */
/* Enforces Brand Gold #b08a48 and Radius 0.5rem */

/* --- Layout & Containers --- */
.insitu-controls {
  background-color: #fff;
  border-right: 1px solid #e5e5e5; /* Subtle divider */
  padding: 1.5rem;
}

.insitu-canvas-area {
  background-color: #1F2937; /* Dark Grey/Black for art contrast */
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
}

/* --- Typography --- */
.insitu-controls h5 {
  color: #000;
  font-weight: 500;
  border-bottom: 1px solid #b08a48; /* Gold Underline */
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

.insitu-controls label {
  color: #000;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.insitu-controls .text-muted {
  color: #6c757d !important;
}

/* --- Inputs & Form Elements (Gold Borders, 0.5rem Radius) --- */
.insitu-controls .form-control,
.insitu-controls .form-select {
  border: 1px solid #b08a48 !important;
  border-radius: 0.5rem !important; /* Your requested radius */
  padding: 0.5rem;
  font-size: 0.9rem;
  color: #000;
  box-shadow: none !important;
}

.insitu-controls .form-control:focus,
.insitu-controls .form-select:focus {
  border-color: #b08a48 !important;
  box-shadow: 0 0 0 3px rgba(176, 138, 72, 0.15) !important; /* Soft gold glow */
}

/* File Input specific tweaks */
.insitu-controls input[type="file"]::file-selector-button {
  background-color: #fff;
  color: #b08a48;
  border-right: 1px solid #b08a48;
}

/* --- Shape Toggles (Radio Buttons) --- */
/* Overriding .btn-outline-secondary to be Gold */
.insitu-controls .btn-check + .btn-outline-secondary {
  color: #b08a48;
  border-color: #b08a48;
  background-color: #fff;
  border-radius: 0.5rem !important; /* Your requested radius */
}

.insitu-controls .btn-check:checked + .btn-outline-secondary {
  background-color: #b08a48;
  border-color: #b08a48;
  color: #fff;
  box-shadow: none;
}

/* --- Action Buttons (Overrides Bootstrap Colors) --- */

/* 1. Generate Room (Originally btn-dark) */
#btnGenerateRoom {
  background-color: #000 !important;
  border: 1px solid #000 !important;
  color: #fff !important;
  border-radius: 0.5rem !important;
  font-weight: 500;
  transition: all 0.2s ease;
}
#btnGenerateRoom:hover:not(:disabled) {
  background-color: #b08a48 !important; /* Hover turns Gold */
  border-color: #b08a48 !important;
  color: #fff !important;
}

/* 2. Save To Gallery (Originally btn-success green) */
#btnSaveToGallery {
  background-color: #b08a48 !important; /* Force Brand Gold */
  border: 1px solid #b08a48 !important;
  color: #fff !important;
  border-radius: 0.5rem !important;
}
#btnSaveToGallery:hover:not(:disabled) {
  background-color: #9a773f !important; /* Darker gold on hover */
  border-color: #9a773f !important;
}

/* 3. Download Only (Originally btn-outline-primary blue) */
#btnDownload {
  color: #b08a48 !important;
  border: 1px solid #b08a48 !important;
  background-color: transparent !important;
  border-radius: 0.5rem !important;
}
#btnDownload:hover:not(:disabled) {
  background-color: #b08a48 !important;
  color: #fff !important;
}

/* Disabled States */
.insitu-controls .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #e9ecef !important;
  border-color: #dee2e6 !important;
  color: #6c757d !important;
}

/* --- Instructions Alert Box --- */
.insitu-controls .alert-info {
  background-color: #f8f9fa !important; /* Light gray instead of blue */
  border: 1px solid #b08a48 !important;
  color: #000 !important;
  border-radius: 0.5rem !important;
}

/* --- Canvas Placeholder --- */
#canvasPlaceholder {
  color: rgba(255,255,255,0.4);
}
#canvasPlaceholder i {
  color: #b08a48; /* Gold icon */
}

/* --- Draggable Image Styles --- */
.insitu-art-layer {
  position: absolute;
  transform-origin: center center;
  cursor: grab;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5); /* Lifted effect */
  user-select: none;
  /* Shape handling */
  transition: border-radius 0.3s ease; 
}

.insitu-art-layer:active {
  cursor: grabbing;
}

.insitu-art-layer.is-round {
  border-radius: 50%;
}