/* ZH Choice theme adapter for the independently deployed Flowable UI.
   Load after its bundled CSS. Selectors cover neutral surfaces and UI actions;
   status badges, diagram fills/strokes, and the application state stay intact. */
:root {
  --zh-workflow-paper: #f7f8f5;
  --zh-workflow-surface: #fffefa;
  --zh-workflow-soft: #eef2e9;
  --zh-workflow-ink: #23372e;
  --zh-workflow-muted: #5e6a59;
  --zh-workflow-forest: #244d3d;
  --zh-workflow-forest-hover: #183c2d;
  --zh-workflow-mint: #e6eedf;
  --zh-workflow-line: #dce2d8;
  --zh-workflow-focus: #55794e;
  color-scheme: light;
}

body,
body.bg-slate-50 {
  background-color: var(--zh-workflow-paper);
  color: var(--zh-workflow-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}

body ::selection { background: #c9ddba; color: #183c2d; }
body :is(input, textarea, select) { accent-color: var(--zh-workflow-forest); }

/* Neutral utility tokens also serve portaled dialogs and drawers. */
body .bg-slate-50,
body [class~="bg-slate-50/50"],
body [class~="bg-slate-50/80"] { background-color: var(--zh-workflow-paper); }
body .bg-slate-100 { background-color: var(--zh-workflow-soft); }
body .bg-white { background-color: var(--zh-workflow-surface); }
body [class~="bg-white/90"],
body [class~="bg-white/95"] { background-color: #fffefaf5; }
body :is(.border-slate-100, .border-slate-200),
body [class~="border-slate-200/80"] { border-color: var(--zh-workflow-line); }
body .border-slate-300 { border-color: #c6d0bf; }
body .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--zh-workflow-line); }
body :is(.text-slate-400, .text-slate-500) { color: var(--zh-workflow-muted); }
body .text-slate-600 { color: #53644f; }
body .text-slate-700 { color: #3e5141; }
body :is(.text-slate-800, .text-slate-900) { color: var(--zh-workflow-ink); }
body :is(input, textarea)::placeholder { color: #697762; opacity: 1; }

/* Keep existing dark code/diagnostic surfaces readable. */
body :is(pre, code, .bg-slate-800, .bg-slate-900, .bg-slate-950, .bg-black, .from-slate-900) .text-slate-400 { color: #94a3b8; }
body :is(pre, code, .bg-slate-800, .bg-slate-900, .bg-slate-950, .bg-black, .from-slate-900) .text-slate-500 { color: #94a3b8; }

/* Branding uses the original blue/indigo gradient pair; semantic blue badges
   and graph colors do not match this selector. */
body [class~="from-blue-600"][class~="to-indigo-600"] {
  background-image: none;
  background-color: var(--zh-workflow-forest);
  border-color: #3b6049;
  --tw-shadow-color: #244d3d18;
}
body [class~="from-blue-600"][class~="to-indigo-600"] .text-blue-100 { color: #d8e7c9; }
body .glass-panel {
  background-color: var(--zh-workflow-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body .glass-panel[class~="from-blue-600/5"] { background-image: none; }
body .glass-panel .text-blue-700 { color: var(--zh-workflow-forest); }

/* Application shell: same quiet rail, fine dividers and compact corners. */
#root > .min-h-screen { background-color: var(--zh-workflow-paper); }
#root > .min-h-screen > header {
  background-color: var(--zh-workflow-surface);
  border-color: var(--zh-workflow-line);
  box-shadow: none;
}
#root > .min-h-screen > header [class~="bg-blue-100"][class~="text-blue-700"] {
  background-color: var(--zh-workflow-mint);
  color: var(--zh-workflow-forest);
}
#root > .min-h-screen > header .text-blue-600 { color: var(--zh-workflow-forest); }
#root > .min-h-screen > .flex > aside {
  background-color: #f0f3ed;
  border-color: var(--zh-workflow-line);
}
#root > .min-h-screen > .flex > aside button { border-radius: 8px; font-weight: 600; }
#root > .min-h-screen > .flex > aside button.bg-blue-50 {
  background-color: var(--zh-workflow-mint);
  color: var(--zh-workflow-forest);
  box-shadow: inset 2px 0 0 #55794e;
}
#root > .min-h-screen > .flex > aside button.bg-blue-50 .text-blue-600 { color: var(--zh-workflow-forest); }
#root > .min-h-screen > .flex > aside button:not(.bg-blue-50):hover { background-color: #e6ece0; }
/* Same green status meaning, with enough contrast for the small online label. */
#root > .min-h-screen > .flex > aside .text-emerald-600 { color: #047857; }

/* Forms and actions: do not recolor danger/success controls or badges. */
body :is(button, a):is(.bg-blue-600, .bg-blue-700) {
  background-color: var(--zh-workflow-forest);
  border-color: var(--zh-workflow-forest);
}
body :is(button, a):is(.bg-blue-600, .bg-blue-700):hover:not(:disabled),
body button[class~="from-blue-600"][class~="to-indigo-600"]:hover:not(:disabled) {
  background-color: var(--zh-workflow-forest-hover);
  background-image: none;
}
body :is(button, a):is(.text-blue-600, .text-blue-700) { color: var(--zh-workflow-forest); }
body :is(button, a):is(.text-blue-600, .text-blue-700):hover { color: var(--zh-workflow-forest-hover); }
body :is(button, a).bg-blue-50 { background-color: var(--zh-workflow-mint); }
body :is(button, a):is(.border-blue-500, .border-blue-600, .border-blue-700) { border-color: var(--zh-workflow-forest); }
body :is(button, a)[class~="hover:bg-blue-50"]:hover { background-color: var(--zh-workflow-mint); }
body :is(button, a, tr)[class~="hover:bg-slate-50"]:hover { background-color: var(--zh-workflow-soft); }
body :is(button, a)[class~="hover:bg-slate-100"]:hover { background-color: #e4eadf; }
body [class~="hover:border-blue-300"]:hover { border-color: #a4b696; }
body :is(button, input, select, textarea).rounded-xl { border-radius: 8px; }
body :is(input, select, textarea):focus:not([aria-invalid="true"]):not([class*="border-rose-"]):not([class*="border-red-"]) {
  border-color: var(--zh-workflow-focus);
  --tw-ring-color: #55794e26;
}
body :is(button, a, input, select, textarea, [role="button"]):focus-visible {
  outline: 2px solid var(--zh-workflow-focus);
  outline-offset: 3px;
}
body :is(input[type="checkbox"], input[type="radio"]):focus-visible { outline-offset: 2px; }

/* Login: retain the real form and its validation; only update its framing. */
#root > .min-h-screen.bg-gradient-to-tr {
  min-height: 100dvh;
  background-image: radial-gradient(ellipse at 50% 35%, #e8efdf 0, transparent 62%);
}
#root > .min-h-screen.bg-gradient-to-tr > .max-w-md {
  max-width: 430px;
  border-radius: 18px;
  border-color: #d4decf;
  box-shadow: 0 16px 55px #23372e0d;
}
#root > .min-h-screen.bg-gradient-to-tr h2 { font-size: 21px; font-weight: 600; letter-spacing: -.025em; }
#root > .min-h-screen.bg-gradient-to-tr .text-center > [class~="from-blue-600"] {
  border-radius: 13px;
  font-family: Georgia, serif;
  box-shadow: none;
}
#root > .min-h-screen.bg-gradient-to-tr form :is(input, button) { min-height: 44px; }
#root > .min-h-screen.bg-gradient-to-tr form label { font-weight: 600; }

/* Welcome cards and modal shells use the same surface family. */
body [data-testid="onboarding-card"] { border-radius: 16px; }
body [data-testid="onboarding-card"] button.bg-white { color: var(--zh-workflow-forest); }
body [data-testid="onboarding-launcher"] { box-shadow: 0 4px 18px #244d3d26; }
#root main > .space-y-6 > .glass-panel { border-radius: 16px; }
#root main > .space-y-6 > .grid > .bg-white.rounded-2xl { border-radius: 12px; box-shadow: 0 1px 2px #244d3d04; }
body [role="dialog"][data-modal-layout] { background-color: var(--zh-workflow-surface); border-color: var(--zh-workflow-line); box-shadow: 0 20px 70px #183c2d26; }
body [role="dialog"][data-modal-layout="dialog"] { border-radius: 14px; }
body [class~="bg-slate-900/50"] { background-color: #183c2d66; }

@media (max-width: 480px) {
  #root > .min-h-screen.bg-gradient-to-tr > .max-w-md { padding: 26px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  body :is(.animate-fadeIn, .animate-pulse, .animate-bounce) { animation: none; }
  body .guide-pulse { animation: none; outline-color: var(--zh-workflow-focus); }
}