/* ============================================
   Klaus AI / EcoRay — Custom Brand Stylesheet
   Open WebUI v0.11.0
   v3 — 2026-08-09
   ============================================ */

/* ── CSS Variables ── */
:root {
  --ecoray-green: #10b981;
  --ecoray-green-dark: #059669;
  --ecoray-green-darker: #047857;
  --ecoray-green-light: #34d399;
  --ecoray-green-lighter: #6ee7b7;
  --ecoray-green-bg: #ecfdf5;
  --ecoray-dark-bg: #0f172a;
}

/* ── Hide " (Open WebUI)" suffix from WEBUI_NAME ── */
/* Open WebUI auto-appends " (Open WebUI)" to custom WEBUI_NAME values.
   Nginx sub_filter catches most, this catches any remaining in CSS-visible areas. */

/* ── Sidebar brand accent ── */
nav [class*="text-2xl"], nav [class*="font-bold"] {
  color: var(--ecoray-green) !important;
}

/* ── Primary buttons ── */
button[class*="bg-blue-600"],
button[class*="bg-blue-700"] {
  background-color: var(--ecoray-green) !important;
}
button[class*="bg-blue-600"]:hover,
button[class*="bg-blue-700"]:hover {
  background-color: var(--ecoray-green-dark) !important;
}

/* ── Links ── */
a[class*="text-blue"] {
  color: var(--ecoray-green) !important;
}

/* ── Chat send button ── */
button[class*="rounded-full"][class*="bg-black"],
button[class*="rounded-full"][class*="bg-gray-900"],
[data-testid="send-button"] {
  background-color: var(--ecoray-green) !important;
}

/* ── Selected model indicator ── */
[class*="model"] [class*="selected"],
[class*="ModelSelector"] [class*="active"] {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: white !important;
}

/* ── Model dropdown items ── */
[class*="model"] [role="option"]:hover,
[class*="ModelSelector"] [role="option"]:hover {
  background: rgba(16, 185, 129, 0.08) !important;
  border-left: 3px solid #10b981 !important;
}

/* ── Top bar / header accent ── */
header, [class*="header"], nav [class*="top"] {
  border-bottom: 2px solid rgba(16, 185, 129, 0.2) !important;
}

/* ── Chat input border focus glow ── */
textarea:focus, input[type="text"]:focus, [class*="chat"] textarea:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

/* ── Scrollbar accent ── */
::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.4) !important;
  border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 185, 129, 0.7) !important;
}

/* ── Message bubbles ── */
[class*="message"][class*="assistant"] [class*="content"],
.assistant-message, [class*="assistant"] .prose {
  border-left: 2px solid rgba(16, 185, 129, 0.3) !important;
  padding-left: 12px !important;
}

/* ── Loading/spinner color ── */
[class*="spinner"], [class*="loading"], .animate-spin {
  color: #10b981 !important;
}

/* ── Chat header model badge ── */
[class*="chat"] [class*="model"] {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
}

/* ── Welcome / empty state ── */
[class*="empty-state"], [class*="welcome-message"] {
  background: linear-gradient(135deg, var(--ecoray-green-bg), #f0fdf4) !important;
}

/* ── Tag/badge colors ── */
[class*="badge"], [class*="tag"] {
  --tw-ring-color: var(--ecoray-green) !important;
}

/* ── Sidebar active item ── */
nav a[class*="bg-gray-"], nav button[class*="bg-gray-"],
[class*="sidebar"] [class*="active"] {
  background-color: rgba(16, 185, 129, 0.1) !important;
  color: var(--ecoray-green) !important;
}

/* ── Toggle switches ── */
input[type="checkbox"]:checked {
  background-color: var(--ecoray-green) !important;
  border-color: var(--ecoray-green) !important;
}

/* ── Selection color ── */
::selection {
  background: rgba(16, 185, 129, 0.25) !important;
  color: inherit !important;
}

/* ── Focus rings ── */
*:focus-visible {
  outline-color: var(--ecoray-green) !important;
}

/* ── Dark mode adjustments ── */
@media (prefers-color-scheme: dark) {
  [class*="ModelSelector"] button[class*="active"],
  [class*="model-select"] [class*="selected"],
  button[data-selected="true"] {
    background: linear-gradient(135deg, #059669, #047857) !important;
  }
  
  [class*="ModelSelector"] [role="option"]:hover,
  [class*="model-select"] [role="option"]:hover {
    background: rgba(16, 185, 129, 0.12) !important;
  }
  
  [class*="chat"] [class*="model"] {
    background: linear-gradient(135deg, #064e3b, #065f46) !important;
    color: #6ee7b7 !important;
    border-color: #059669 !important;
  }
}

/* ═══════════════════════════════════════
   AUTH PAGE BRANDING
   ═══════════════════════════════════════ */

/* Login/signup container accent */
[class*="auth"], [class*="login"], [class*="signup"], [class*="signin"],
form[class*="auth"] {
  --auth-accent: var(--ecoray-green);
}

/* Auth page headings */
[class*="auth"] h1, [class*="login"] h1, [class*="signup"] h1 {
  color: var(--ecoray-green) !important;
}

/* Auth form inputs — green focus ring */
[class*="auth"] input:focus, [class*="login"] input:focus,
[class*="signup"] input:focus {
  border-color: var(--ecoray-green) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

/* Auth submit button */
[class*="auth"] button[type="submit"],
[class*="login"] button[type="submit"],
[class*="signup"] button[type="submit"] {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: none !important;
  transition: all 0.2s ease !important;
}
[class*="auth"] button[type="submit"]:hover,
[class*="login"] button[type="submit"]:hover,
[class*="signup"] button[type="submit"]:hover {
  background: linear-gradient(135deg, #059669, #047857) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* Auth page divider/subtle brand mark */
[class*="auth"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #10b981, #34d399, #10b981);
  z-index: 9999;
  pointer-events: none;
}

/* Auth card/panel — subtle green glow */
[class*="auth"] > div:first-of-type,
[class*="login"] > div:first-of-type,
[class*="signup"] > div:first-of-type {
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.08), 0 4px 20px rgba(0,0,0,0.1) !important;
}

/* Checkbox in signup forms — green */
[class*="auth"] input[type="checkbox"]:checked {
  accent-color: var(--ecoray-green) !important;
  background-color: var(--ecoray-green) !important;
}

/* Password visibility toggle */
[class*="auth"] button[class*="eye"],
[class*="auth"] button[class*="toggle"],
[class*="auth"] button[aria-label*="password"] {
  color: var(--ecoray-green) !important;
}