/* Minimal animated color stylesheet
   - Provides an animated gradient background
   - Keeps a few simple component classes used by views
   - Removes the heavy theme specifics in favor of subtle styles
*/
:root {
  /* Modern neutral + accent palette */
  --primary: #4F46E5; /* indigo-600 */
  --secondary: #06B6D4; /* cyan-500 */
  --accent: #10B981; /* emerald-500 */
  --bg: #071226; /* deep navy */
  --panel-bg: rgba(255,255,255,0.03);
  --text: rgba(230,238,246,0.98);
  --muted: rgba(230,238,246,0.72);
  --success: #10B981;
  --danger: #EF4444;
}

html, body { height: 100%; margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial; }

/* Animated diagonal gradient background */
body.genia-theme {
  color: var(--text);
  background: linear-gradient(120deg, rgba(79,70,229,0.03), rgba(6,182,212,0.02)), var(--bg);
  background-blend-mode: overlay;
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
  -webkit-font-smoothing:antialiased;
}

@keyframes gradientShift {
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* Simple container for panels */
.genia-panel {
  background: rgba(6,10,17,0.6);
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
}

.genia-accent { color: var(--primary); }

/* Minimal button with refined accent */
.genia-btn {
  display: inline-block;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color: #fff;
  padding: .6rem .95rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(79,70,229,0.12);
  transition: transform .18s ease, box-shadow .12s ease;
}
.genia-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(79,70,229,0.16); }

/* Inputs / selects */
input[type="text"], input[type="number"], input[type="email"], select, textarea {
  width: 100%;
  padding: .7rem .8rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  outline: none;
}
input, select, textarea::placeholder { color: rgba(230,238,246,0.6); }
select { background-image: none; }
textarea { resize: vertical; }

/* Table small style for items list */
table { width: 100%; border-collapse: collapse; }
table th, table td { padding: .6rem .5rem; color: var(--muted); font-size: .95rem; }

/* Small utility classes */
.text-sm { font-size: .95rem; }
.genia-light { color: rgba(0,0,0,0.9); }

/* Light-mode overrides when `genia-light` is present on body */
.genia-theme.genia-light {
  --bg: #f8fafc;
  --panel-bg: #ffffff;
  --text: rgba(17,24,39,0.95);
  --muted: rgba(17,24,39,0.6);
}

.genia-theme.genia-light .genia-panel {
  background: var(--panel-bg);
  border: 1px solid rgba(15,23,42,0.04);
  color: var(--text);
}

/* Keep animations light and non-distracting */
@media (prefers-reduced-motion: reduce) {
  body.genia-theme { animation: none; }
  .genia-btn { transition: none; }
}

/* End of minimal animated theme */

/* Dropdown / option visibility fixes */
select {
  color: var(--text) !important;
  background: rgba(255,255,255,0.03) !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Ensure option text is visible in dropdown lists */
option {
  color: var(--text) !important;
  background: rgba(6,10,17,0.92) !important;
}

/* Light-mode variant for selects/options if a light class is used */
.genia-light select,
.genia-theme.genia-light select,
.genia-theme.genia-light option {
  color: rgba(0,0,0,0.9) !important;
  background: #ffffff !important;
}

/* Provide a visible caret on modern browsers */
select::-ms-expand { display: block; color: var(--text); }