/* Scoped styles for the Energy Sources settings tab. Feature prefix: .es- */

.es-root {
  /* Neutrals */
  --es-white: #fff;
  --es-slate-900: #0f172a;
  --es-slate-800: #1e293b;
  --es-slate-600: #475569;
  --es-slate-500: #64748b;
  --es-slate-400: #94a3b8;
  --es-slate-300: #cbd5e1;
  --es-slate-200: #e2e8f0;
  --es-slate-100: #f1f5f9;
  --es-slate-50: #f8fafc;
  --es-gray-700: #374151;
  --es-gray-300: #d1d5db;
  --es-gray-50: #fafafa;

  /* Accent */
  --es-accent: #3f88a5;
  --es-accent-shadow: #3f88a544;

  /* Blues / cyans */
  --es-blue-800: #1e40af;
  --es-blue-700: #1d4ed8;
  --es-blue-600: #2563eb;
  --es-blue-500: #3b82f6;
  --es-blue-300: #93c5fd;
  --es-blue-200: #bfdbfe;
  --es-blue-100: #dbeafe;
  --es-blue-50: #eff6ff;
  --es-cyan-700: #0369a1;
  --es-sky-900: #0c4a6e;
  --es-sky-200: #bae6fd;
  --es-sky-100: #e0f2fe;
  --es-sky-50: #f0f9ff;

  /* Source amber / orange */
  --es-source: #d97706;
  --es-amber-900: #92400e;
  --es-amber-700: #b45309;
  --es-amber-300: #fcd34d;
  --es-amber-100: #fef3c7;
  --es-amber-50: #fffbeb;
  --es-orange-600: #ea580c;
  --es-orange-300: #fdba74;
  --es-orange-50: #fff7ed;

  /* Status */
  --es-red-600: #dc2626;
  --es-red-500: #ef4444;
  --es-red-200: #fecaca;
  --es-red-50: #fff5f5;
  --es-green-600: #16a34a;

  /* Shadows */
  --es-shadow-xs: rgba(0, 0, 0, 0.04);
  --es-shadow-sm: rgba(0, 0, 0, 0.06);
  --es-shadow-md: rgba(0, 0, 0, 0.1);
  --es-shadow-lg: rgba(0, 0, 0, 0.15);

  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--es-slate-100);
  min-height: 100vh;
}

.es-root * { box-sizing: border-box; }
.es-root select:focus { outline: none; }
.es-root button:focus-visible { outline: 2px solid var(--es-accent); outline-offset: 2px; }

@keyframes es-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Text inputs: focus border via CSS (not onFocus style mutation) */
.es-input {
  border: 1.5px solid var(--es-slate-200);
  transition: border-color 0.15s;
}
.es-input:focus { border-color: var(--es-blue-300); }

/* Small "×" clear buttons: hover to red via CSS (not onMouseEnter) */
.es-x-btn {
  color: var(--es-slate-300);
  transition: color 0.15s;
}
.es-x-btn:hover { color: var(--es-red-500); }

/* Filter chip remove "×": starts blue, hovers red */
.es-chip-x {
  color: var(--es-blue-300);
  transition: color 0.15s;
}
.es-chip-x:hover { color: var(--es-red-500); }

/* Native <select> chevron + reset — shared by the source pickers */
.es-select {
  appearance: none;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 7px;
}