/* ClientPortal's own styles; the shared design layer is css/portal.css.
 *
 * The indigo ramp is this portal's built-in brand accent: an install with no brand colour set
 * looks as it always has, and one with a colour (Branding page, --brand) recolours every
 * indigo utility the views use. Moved out of index.html as it was. */

:root { --wf-brand-default: #4f46e5; }

@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Pragmatic dark theme: remap the surface utility classes the app uses. */
.dark body { background-color: #0f172a; }
.dark .bg-white { background-color: #1e293b !important; }
.dark .bg-slate-50 { background-color: #0f172a !important; }
.dark .bg-slate-100 { background-color: #334155 !important; }
.dark .text-slate-900, .dark .text-slate-800, .dark .text-slate-700 { color: #f1f5f9 !important; }
.dark .text-slate-600, .dark .text-slate-500 { color: #94a3b8 !important; }
.dark .text-slate-400, .dark .text-slate-300 { color: #64748b !important; }
.dark .border-slate-100, .dark .border-slate-200, .dark .border-slate-300 { border-color: #334155 !important; }
.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #334155 !important; }
.dark input, .dark select, .dark textarea { background-color: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; }
.dark ::placeholder { color: #64748b !important; }
.dark .hover\:bg-slate-50:hover { background-color: #334155 !important; }
.dark .hover\:bg-slate-100:hover { background-color: #475569 !important; }
.dark .bg-slate-200 { background-color: #334155 !important; }

/* Accent tints, badges, colored text/borders and hovers under dark mode.
   The base app uses light tints (bg-*-50 / bg-*-100) with *-600/700/800 text;
   remap them to dark-friendly translucent tints + lighter accent text. */
.dark .bg-rose-50    { background-color: rgba(244,63,94,.13) !important; }
.dark .bg-rose-100   { background-color: rgba(244,63,94,.22) !important; }
.dark .bg-amber-50   { background-color: rgba(245,158,11,.13) !important; }
.dark .bg-amber-100  { background-color: rgba(245,158,11,.22) !important; }
.dark .bg-emerald-50 { background-color: rgba(16,185,129,.13) !important; }
.dark .bg-emerald-100{ background-color: rgba(16,185,129,.22) !important; }
.dark .bg-indigo-50  { background-color: rgba(99,102,241,.15) !important; }
.dark .bg-indigo-50\/60 { background-color: rgba(99,102,241,.15) !important; }
.dark .bg-indigo-100 { background-color: rgba(99,102,241,.24) !important; }
.dark .bg-blue-50    { background-color: rgba(59,130,246,.13) !important; }
.dark .bg-blue-100   { background-color: rgba(59,130,246,.22) !important; }
.dark .bg-violet-50  { background-color: rgba(139,92,246,.13) !important; }
.dark .bg-violet-100 { background-color: rgba(139,92,246,.24) !important; }
.dark .bg-sky-50     { background-color: rgba(14,165,233,.13) !important; }
.dark .bg-sky-100    { background-color: rgba(14,165,233,.22) !important; }

.dark .text-rose-600, .dark .text-rose-700, .dark .text-rose-800       { color: #fda4af !important; }
.dark .text-amber-600, .dark .text-amber-700, .dark .text-amber-800    { color: #fcd34d !important; }
.dark .text-emerald-600, .dark .text-emerald-700, .dark .text-emerald-800 { color: #6ee7b7 !important; }
.dark .text-indigo-600, .dark .text-indigo-700, .dark .text-indigo-800 { color: #a5b4fc !important; }
.dark .text-blue-600, .dark .text-blue-700, .dark .text-blue-800       { color: #93c5fd !important; }
.dark .text-violet-600, .dark .text-violet-700, .dark .text-violet-800 { color: #c4b5fd !important; }
.dark .text-sky-600, .dark .text-sky-700, .dark .text-sky-800          { color: #7dd3fc !important; }

.dark .border-rose-100, .dark .border-rose-200, .dark .border-rose-300          { border-color: rgba(244,63,94,.4) !important; }
.dark .border-amber-100, .dark .border-amber-200, .dark .border-amber-300       { border-color: rgba(245,158,11,.4) !important; }
.dark .border-emerald-100, .dark .border-emerald-200, .dark .border-emerald-300 { border-color: rgba(16,185,129,.4) !important; }
.dark .border-indigo-100, .dark .border-indigo-200, .dark .border-indigo-300    { border-color: rgba(99,102,241,.45) !important; }
.dark .border-blue-100, .dark .border-blue-200, .dark .border-blue-300          { border-color: rgba(59,130,246,.4) !important; }
.dark .border-violet-100, .dark .border-violet-200, .dark .border-violet-300    { border-color: rgba(139,92,246,.4) !important; }

.dark .hover\:bg-rose-50:hover    { background-color: rgba(244,63,94,.18) !important; }
.dark .hover\:bg-amber-50:hover   { background-color: rgba(245,158,11,.18) !important; }
.dark .hover\:bg-emerald-50:hover { background-color: rgba(16,185,129,.18) !important; }
.dark .hover\:bg-indigo-50:hover  { background-color: rgba(99,102,241,.2) !important; }
.dark .hover\:bg-indigo-100:hover { background-color: rgba(99,102,241,.28) !important; }

/* Lift shadows so floating menus/modals read against the dark canvas. */
.dark .shadow-xl, .dark .shadow-2xl, .dark .shadow-lg { box-shadow: 0 10px 30px -5px rgba(0,0,0,.7), 0 0 0 1px rgba(148,163,184,.12) !important; }

/* ---- White-label brand colour ----
   JS sets --brand (a hex) from /api/branding when configured. Indigo is the portal's brand
   accent only (success stays emerald), so the whole indigo ramp is recoloured; everything
   falls back to the built-in indigo so an unbranded install looks unchanged. */
:root {
  --brand-strong: color-mix(in srgb, var(--brand) 82%, black);
  --brand-ring:   color-mix(in srgb, var(--brand) 72%, white);
  --brand-deep:   color-mix(in srgb, var(--brand) 45%, black);
  --brand-light:  color-mix(in srgb, var(--brand) 65%, white);
  --brand-tint:   color-mix(in srgb, var(--brand) 15%, white);
}
:root.dark {
  --brand-tint:  color-mix(in srgb, var(--brand) 26%, #0f172a);
  --brand-textd: color-mix(in srgb, var(--brand) 62%, white);
}
.bg-indigo-600 { background-color: var(--brand, #4f46e5) !important; }
.bg-indigo-700 { background-color: var(--brand-strong, #4338ca) !important; }
.hover\:bg-indigo-700:hover { background-color: var(--brand-strong, #4338ca) !important; }
.text-indigo-600 { color: var(--brand, #4f46e5) !important; }
.text-indigo-700 { color: var(--brand-strong, #4338ca) !important; }
.hover\:text-indigo-700:hover { color: var(--brand-strong, #4338ca) !important; }
.accent-indigo-600 { accent-color: var(--brand, #4f46e5) !important; }
.focus\:ring-indigo-500:focus { --tw-ring-color: var(--brand-ring, #6366f1) !important; }
.focus\:border-indigo-500:focus { border-color: var(--brand, #4f46e5) !important; }
.bg-indigo-100 { background-color: var(--brand-tint, #e0e7ff) !important; }
.bg-indigo-50, .bg-indigo-50\/60 { background-color: var(--brand-tint, #eef2ff) !important; }
.border-indigo-200, .border-indigo-300, .border-indigo-500, .border-indigo-600 { border-color: var(--brand, #4f46e5) !important; }
.text-indigo-200 { color: var(--brand-light, #c7d2fe) !important; }
.from-indigo-600 { --tw-gradient-from: var(--brand, #4f46e5) var(--tw-gradient-from-position) !important; }
.to-indigo-900 { --tw-gradient-to: var(--brand-deep, #312e81) !important; }
/* dark-mode brand text/tint (override the generic dark accent remap above) */
.dark .text-indigo-600, .dark .text-indigo-700, .dark .text-indigo-800 { color: var(--brand-textd, #a5b4fc) !important; }
.dark .bg-indigo-100 { background-color: var(--brand-tint, rgba(99,102,241,.24)) !important; }
.dark .bg-indigo-50, .dark .bg-indigo-50\/60 { background-color: var(--brand-tint, rgba(99,102,241,.15)) !important; }