/* Glass + glow theme, layered over the Tailwind utility classes in index.html and login.html.
   Selectors chain two classes so they outrank Tailwind's single-class utilities regardless of load order. */
:root {
  --glow-lime: 183 207 87;   /* brand-400 */
  --glow-green: 47 107 74;   /* brand-500 */
  --glass-border: rgb(255 255 255 / 0.08);
  --glass-highlight: rgb(255 255 255 / 0.07);
  --glass-shadow: 0 8px 32px rgb(0 0 0 / 0.28);
  color-scheme: dark;
  scrollbar-color: rgb(255 255 255 / 0.14) transparent;
}

/* Ambient background glow. Static on purpose: animating it would force every blurred panel to repaint each frame. */
html {
  background:
    radial-gradient(ellipse 50% 40% at 65% 35%, rgb(20 184 166 / 0.07), transparent 70%),
    #070f0c;
}
body { isolation: isolate; }
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
body::before {
  width: 70vw; height: 70vw;
  top: -30vw; left: -15vw;
  background: radial-gradient(circle, rgb(var(--glow-green) / 0.55), transparent 65%);
}
body::after {
  width: 55vw; height: 55vw;
  bottom: -25vw; right: -12vw;
  background: radial-gradient(circle, rgb(var(--glow-lime) / 0.18), transparent 65%);
}

/* Glass panels: cards, KPI tiles, table wrappers, the login box */
.bg-slate-800\/50.border,
#leadModal > div {
  background: linear-gradient(145deg, rgb(51 65 85 / 0.32), rgb(15 23 42 / 0.32));
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.bg-slate-800\/50.border:not(.overflow-x-auto):hover {
  border-color: rgb(var(--glow-lime) / 0.22);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow), 0 0 28px rgb(var(--glow-lime) / 0.08);
}
#leadModal > div { background: linear-gradient(145deg, rgb(30 41 59 / 0.75), rgb(15 23 42 / 0.75)); }
thead.bg-slate-800 { background-color: rgb(15 23 42 / 0.45); }

/* Inputs and selects */
.bg-slate-900.border {
  background-color: rgb(2 6 23 / 0.4);
  border-color: rgb(255 255 255 / 0.1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bg-slate-900.border:focus {
  border-color: rgb(var(--glow-lime) / 0.55);
  box-shadow: 0 0 0 3px rgb(var(--glow-lime) / 0.12), 0 0 18px rgb(var(--glow-lime) / 0.15);
}
select option { background-color: #0f172a; color: #e2e8f0; }

/* Buttons. The edge is an inset ring rather than a border so buttons without a border class don't shift size. */
button.bg-slate-800,
button.bg-slate-700,
button.hover\:border-rose-500\/40 {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.02));
  border-color: transparent;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 2px 10px rgb(0 0 0 / 0.25);
  transition: box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
button.bg-slate-800:hover:not(:disabled),
button.bg-slate-700:hover:not(:disabled) {
  background-color: rgb(var(--glow-lime) / 0.06);
  color: #f1f5f9;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 1px rgb(var(--glow-lime) / 0.35), 0 0 18px rgb(var(--glow-lime) / 0.18);
}
button.hover\:border-rose-500\/40:hover {
  background-color: rgb(244 63 94 / 0.08);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), inset 0 0 0 1px rgb(244 63 94 / 0.45), 0 0 16px rgb(244 63 94 / 0.25);
}

button.bg-brand-600,
button.bg-amber-600 {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: box-shadow 0.2s ease, filter 0.2s ease, transform 0.1s ease;
}
button.bg-brand-600 {
  background-color: transparent;
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0) 55%),
    linear-gradient(135deg, rgb(58 128 88 / 0.85), rgb(36 85 59 / 0.85));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), inset 0 0 0 1px rgb(var(--glow-lime) / 0.3), 0 4px 18px rgb(var(--glow-green) / 0.55), 0 0 14px rgb(var(--glow-lime) / 0.15);
}
button.bg-brand-600:hover {
  filter: brightness(1.12);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 0 0 1px rgb(var(--glow-lime) / 0.5), 0 4px 24px rgb(var(--glow-green) / 0.6), 0 0 26px rgb(var(--glow-lime) / 0.35);
}
button.bg-amber-600 {
  background-color: transparent;
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 55%),
    linear-gradient(135deg, rgb(245 158 11 / 0.85), rgb(180 83 9 / 0.85));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 0 0 1px rgb(252 211 77 / 0.35), 0 4px 20px rgb(245 158 11 / 0.4);
}
button.bg-amber-600:hover {
  filter: brightness(1.1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 0 0 1px rgb(252 211 77 / 0.55), 0 4px 26px rgb(245 158 11 / 0.6);
}

button:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
button:disabled { box-shadow: none; filter: none; }
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--glow-lime) / 0.6), 0 0 20px rgb(var(--glow-lime) / 0.35);
}

/* Trees / Pests segmented toggle */
.inline-flex.rounded-lg.border:has(> #tdbViewTrees) {
  border-color: rgb(255 255 255 / 0.1);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.02));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#tdbViewPests { border-color: rgb(255 255 255 / 0.1); }
#tdbViewTrees, #tdbViewPests { transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
#tdbViewTrees.bg-brand-600\/30,
#tdbViewPests.bg-brand-600\/30 {
  box-shadow: inset 0 0 14px rgb(var(--glow-lime) / 0.2);
  text-shadow: 0 0 10px rgb(var(--glow-lime) / 0.6);
}

/* Sidebar nav */
aside .nav-btn:not(.bg-brand-600\/20):hover { background-color: rgb(255 255 255 / 0.05); }
.nav-btn.bg-brand-600\/20 {
  box-shadow: inset 0 0 0 1px rgb(var(--glow-lime) / 0.22), 0 0 22px rgb(var(--glow-lime) / 0.12);
  text-shadow: 0 0 12px rgb(var(--glow-lime) / 0.6);
}

/* Glow accents */
.bg-white.rounded-md,
.bg-white.rounded-lg { box-shadow: 0 0 28px rgb(var(--glow-lime) / 0.18); }
.text-3xl.font-extrabold,
.text-xl.font-extrabold { text-shadow: 0 0 22px rgb(var(--glow-lime) / 0.35); }
#progressBar {
  background-image: linear-gradient(90deg, #2f6b4a, #b7cf57);
  box-shadow: 0 0 12px rgb(var(--glow-lime) / 0.5);
}

/* Login page mascot */
.turkey { filter: drop-shadow(0 0 28px rgb(var(--glow-lime) / 0.25)) drop-shadow(0 10px 24px rgb(0 0 0 / 0.45)); }