/* Image Analysis Page Fixes */

/* Make Analysis Insights header text gold */
.card-header h5.card-title {
  color: var(--mvp-gold) !important;
}

/* Make Analysis Insights body have beige background with brown text */
.analysis-insights .card-body {
  background-color: var(--mvp-beige) !important;
  color: var(--mvp-dark-green) !important;
}

.analysis-insights h5,
.analysis-insights h6,
.analysis-insights p {
  color: var(--mvp-dark-green) !important;
}

/* Fix the Tips for Improvement cards - white background with clear borders */
.analysis-insights .card-body .card {
  background-color: white !important;
  border: 2px solid var(--mvp-dark-green) !important;
}

.analysis-insights .card-body .card .card-body {
  background-color: white !important;
  color: var(--mvp-dark-green) !important;
}

/* Keep card header dark green but make the card body beige */
.analysis-insights {
  border-color: var(--mvp-gold) !important;
}

/* Photo capture UI improvements */
.photo-container {
  border: 1px solid #dee2e6 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  margin-bottom: 15px !important;
  background-color: white !important;
}

/* When camera is active, use black background for video */
.photo-container.camera-active {
  background-color: #000 !important;
}

.live-camera-box {
  background-color: #000 !important;
  text-align: center !important;
  padding: 15px !important;
}

.live-camera-box video {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 4px !important;
  border: 1px solid #343a40 !important;
  background-color: #000 !important;
  display: block !important;
  margin: 0 auto !important;
}

.camera-controls {
  display: grid !important;
  gap: 10px !important;
}

/* Camera buttons styles using high-specificity selectors to override Bootstrap */
/* More specific selectors with !important for camera buttons */
#imageTabContent button#start-photo-camera {
  background-color: #043922 !important;
  border-color: #043922 !important;
  color: white !important;
  transition: all 0.3s ease !important;
  margin-bottom: 10px !important;
  font-weight: 500 !important;
}

#imageTabContent button#start-photo-camera:hover {
  background-color: #075c37 !important;
  border-color: #075c37 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

#imageTabContent button#capture-photo {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
  color: white !important;
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
}

#imageTabContent button#capture-photo:not([disabled]):hover {
  background-color: #218838 !important;
  border-color: #1e7e34 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
  cursor: pointer !important;
}

/* Use a more reliable approach for disabled state */
#capture-tab-content button#capture-photo:disabled {
  background-color: #cccccc !important;
  border-color: #bbbbbb !important;
  color: #666666 !important;
  cursor: not-allowed !important;
  opacity: 0.65 !important;
}

/* Active state for the camera button */
#capture-tab-content button#capture-photo.enabled {
  pointer-events: all !important;
  opacity: 1 !important;
}

#photo-preview-container {
  border: 2px solid var(--mvp-dark-green) !important;
  border-radius: 8px !important;
  padding: 15px !important;
  background-color: var(--mvp-beige) !important;
}

#captured-photo {
  max-height: 300px !important;
  object-fit: contain !important;
  border: 2px solid var(--mvp-gold) !important;
  border-radius: 8px !important;
}