/* --- Color Extractor Themed Styles --- */
/* Upload button */
.upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #4e73df, #2563eb);
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.upload-btn:hover {
  transform: translateY(-2px);
}

/* Preview */
.preview-card {
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
}
.preview-card img {
  max-width: 100%;
  max-height: 360px;
  border-radius: 10px;
  object-fit: cover;
}

/* Color results */
.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.color-card {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--card-bg);
  border-radius: 10px;
  padding: 10px;
  transition: all 0.3s ease;
}
.swatch {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.1);
}
.codes {
  flex: 1;
  font-family: monospace;
  font-size: 0.92rem;
}

/* Copy button */
.copy-btn-small {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--text-color);
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.copy-btn-small:hover {
  background: rgba(255,255,255,0.1);
}

/* --- Theme Support --- */
body.light-theme .color-card,
body.light-theme .preview-card {
  background: rgba(255,255,255,0.9);
  border-color: rgba(0,0,0,0.05);
  color: #212529;
}

body.dark-theme .color-card,
body.dark-theme .preview-card {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.1);
  color: #f1f1f1;
}

/* --- Fixes for Preview & Text Colors in Dark Theme --- */

/* Slightly dim the preview image in dark mode for balance */
body.dark-theme .preview-card img {
  filter: brightness(0.5);
  transition: filter 0.3s ease;
}

/* Make .text-secondary readable on dark backgrounds */
body.dark-theme .text-secondary {
  color: #d1d5db !important; /* soft gray (Tailwind's gray-300 tone) */
}

/* Light theme text (blue) */
body.light-theme #preview[src*="data:image/svg+xml"] {
  filter: none;
}

/* Dark theme text (light blue or white) */
body.dark-theme #preview[src*="data:image/svg+xml"] {
  filter: brightness(2) saturate(0.8);
}