/* Accounting + Treasury: keep page content below the fixed navbar.
   Tailwind's compiled sheet did not emit pt-[70px], so class-only padding was ignored. */
:root {
  --willow-navbar-offset: 5.5rem;
}

html body .navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  min-height: 3.75rem;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

html body #content,
html body .content#content {
  padding-top: var(--willow-navbar-offset);
  box-sizing: border-box;
}

html body .sidebar,
html body .sidebar2,
html body .sidebar3 {
  top: var(--willow-navbar-offset) !important;
  height: calc(100% - var(--willow-navbar-offset)) !important;
  color: var(--w-text-primary) !important;
  background: linear-gradient(180deg, var(--w-bg-surface), var(--w-bg-subtle)) !important;
  border-right: 1px solid var(--w-border-default) !important;
}

html body .sidebar a,
html body .sidebar a span,
html body .sidebar a i,
html body .sidebar2 a,
html body .sidebar2 a span,
html body .sidebar2 a i,
html body .sidebar3 a,
html body .sidebar3 a span,
html body .sidebar3 a i {
  color: var(--w-text-primary) !important;
}

html body .sidebar a:hover,
html body .sidebar a:hover span,
html body .sidebar a:hover i,
html body .sidebar a.active,
html body .sidebar a.active span,
html body .sidebar a.active i,
html body .sidebar2 a:hover,
html body .sidebar2 a:hover span,
html body .sidebar2 a:hover i,
html body .sidebar2 a.active,
html body .sidebar2 a.active span,
html body .sidebar2 a.active i,
html body .sidebar3 a:hover,
html body .sidebar3 a:hover span,
html body .sidebar3 a:hover i,
html body .sidebar3 a.active,
html body .sidebar3 a.active span,
html body .sidebar3 a.active i {
  color: var(--w-fund-primary-dark) !important;
}

html body #content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html body #content select,
html body #content textarea {
  color: var(--w-text-primary);
  background-color: var(--w-bg-surface);
}

html body #content input::placeholder,
html body #content textarea::placeholder {
  color: var(--w-text-tertiary);
  opacity: 1;
}

/* ── Unify hardcoded Tailwind brand colors → theme tokens ─────────────────
   Pages used violet / emerald / teal / rose / indigo independently of the
   selected theme. Status reds/ambers/greens are left alone. */
html body :is(button, a, [type="submit"], [type="button"]).bg-violet-600,
html body :is(button, a, [type="submit"], [type="button"]).bg-violet-700,
html body :is(button, a, [type="submit"], [type="button"]).bg-purple-600,
html body :is(button, a, [type="submit"], [type="button"]).bg-indigo-600,
html body :is(button, a, [type="submit"], [type="button"]).bg-emerald-600,
html body :is(button, a, [type="submit"], [type="button"]).bg-emerald-700,
html body :is(button, a, [type="submit"], [type="button"]).bg-teal-600,
html body :is(button, a, [type="submit"], [type="button"]).bg-teal-700,
html body :is(button, a, [type="submit"], [type="button"]).bg-rose-600,
html body :is(button, a, [type="submit"], [type="button"]).bg-fuchsia-600,
html body :is(button, a, [type="submit"], [type="button"]).bg-amber-600,
html body :is(button, a, [type="submit"], [type="button"]).bg-amber-500,
html body #content .bg-violet-600,
html body #content .bg-purple-600,
html body #content .bg-indigo-600,
html body #content .bg-emerald-600,
html body #content .bg-teal-600,
html body #content .bg-rose-600 {
  background-color: var(--w-fund-primary) !important;
  background-image: none !important;
  color: var(--w-text-on-primary, #ffffff) !important;
  border-color: transparent !important;
}

html body :is(button, a).hover\:bg-violet-700:hover,
html body :is(button, a).hover\:bg-purple-700:hover,
html body :is(button, a).hover\:bg-indigo-700:hover,
html body :is(button, a).hover\:bg-emerald-700:hover,
html body :is(button, a).hover\:bg-teal-700:hover,
html body :is(button, a).hover\:bg-rose-700:hover,
html body :is(button, a).hover\:bg-amber-700:hover,
html body :is(button, a).hover\:bg-amber-600:hover,
html body #content .hover\:bg-violet-700:hover,
html body #content .hover\:bg-emerald-700:hover,
html body #content .hover\:bg-teal-700:hover,
html body #content .hover\:bg-rose-700:hover,
html body #content .hover\:bg-indigo-700:hover {
  background-color: var(--w-fund-primary-dark) !important;
  color: var(--w-text-on-primary, #ffffff) !important;
}

/* Secondary (was slate fill) — outline, not a second loud color */
html body :is(button, a).bg-slate-600,
html body :is(button, a).bg-slate-700,
html body #content .bg-slate-600 {
  background-color: var(--w-bg-surface) !important;
  color: var(--w-text-primary) !important;
  border: 1px solid var(--w-border-strong) !important;
}
html body :is(button, a).hover\:bg-slate-700:hover,
html body #content .hover\:bg-slate-700:hover {
  background-color: var(--w-bg-subtle) !important;
  color: var(--w-text-primary) !important;
}

html body #content .bg-gradient-to-br.from-violet-500,
html body #content .bg-gradient-to-br.from-violet-600,
html body #content .bg-gradient-to-br.from-purple-600,
html body #content .bg-gradient-to-br.from-emerald-500,
html body #content .bg-gradient-to-br.from-emerald-600,
html body #content .bg-gradient-to-br.from-teal-500,
html body #content .bg-gradient-to-br.from-teal-600,
html body #content .bg-gradient-to-br.from-rose-500,
html body #content .bg-gradient-to-br.from-amber-500,
html body #content .bg-gradient-to-br.from-orange-600 {
  background-image: linear-gradient(to bottom right, var(--w-fund-primary), var(--w-fund-primary-dark)) !important;
  color: var(--w-text-on-primary, #ffffff) !important;
}

html body #content .bg-violet-100,
html body #content .bg-violet-50,
html body #content .bg-purple-100,
html body #content .bg-indigo-100,
html body #content .bg-emerald-100,
html body #content .bg-emerald-50,
html body #content .bg-teal-100,
html body #content .bg-rose-100,
html body #content .dark\:bg-violet-900\/30,
html body #content .dark\:bg-emerald-900\/30,
html body #content .dark\:bg-teal-900\/30,
html body #content .dark\:bg-rose-900\/30 {
  background-color: var(--w-fund-header-bg) !important;
}

html body #content .text-violet-600,
html body #content .text-violet-500,
html body #content .text-violet-400,
html body #content .dark\:text-violet-400,
html body #content .text-purple-600,
html body #content .text-indigo-600,
html body #content .text-emerald-600,
html body #content .text-emerald-500,
html body #content .text-emerald-400,
html body #content .dark\:text-emerald-400,
html body #content .text-teal-600,
html body #content .text-teal-400,
html body #content .dark\:text-teal-400,
html body #content .text-rose-600,
html body #content .text-rose-400,
html body #content .text-fuchsia-600 {
  color: var(--w-fund-primary) !important;
}

html body #content .text-violet-100,
html body #content .text-emerald-100,
html body #content .text-teal-100 {
  color: color-mix(in srgb, var(--w-text-on-primary, #fff) 85%, transparent) !important;
}

html body #content .hover\:bg-violet-50:hover,
html body #content .hover\:bg-emerald-50:hover,
html body #content .hover\:bg-teal-50:hover,
html body #content .hover\:bg-rose-50:hover,
html body #content .dark\:hover\:bg-violet-900\/20:hover,
html body #content .dark\:hover\:bg-emerald-900\/20:hover,
html body #content .dark\:hover\:bg-violet-900\/10:hover {
  background-color: var(--w-fund-sidebar-hover) !important;
}

html body #content .focus\:ring-violet-300:focus,
html body #content .focus\:ring-violet-500:focus,
html body #content .focus\:ring-emerald-500:focus,
html body #content .focus\:ring-teal-500:focus,
html body #content .dark\:focus\:ring-violet-600:focus,
html body #content .focus\:border-violet-500:focus,
html body #content .focus\:border-emerald-500:focus {
  --tw-ring-color: var(--w-fund-primary) !important;
  border-color: var(--w-fund-primary) !important;
}

html body a[style*="#217346"],
html body button[style*="#7c3aed"],
html body a[style*="#7c3aed"] {
  background-color: var(--w-fund-primary) !important;
  color: var(--w-text-on-primary, #ffffff) !important;
}

@media print {
  html body #content,
  html body .content#content {
    padding-top: 0 !important;
  }
}