/* Legacy utility compatibility */
    [x-cloak] { display: none !important; }
    @keyframes softFadeIn {
      from { opacity: 0; transform: translateY(2px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .task-refresh-fade {
      animation: softFadeIn 280ms ease-out;
    }
    .flash-success { background: linear-gradient(90deg, #d1fae5, #a7f3d0); border-left: 4px solid #059669; }
    .flash-error   { background: linear-gradient(90deg, #fee2e2, #fecaca); border-left: 4px solid #dc2626; }
    .flash-info    { background: linear-gradient(90deg, #dbeafe, #bfdbfe); border-left: 4px solid #2563eb; }
    .nav-link {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.625rem 0.75rem;
      border-radius: 0.75rem;
      color: #dbeafe;
      transition: all 150ms ease;
      font-size: 0.875rem;
      font-weight: 500;
    }
    .nav-link:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #ffffff;
    }
    .nav-link.active {
      background: rgba(255, 255, 255, 0.15);
      color: #ffffff;
    }
    /* === Gradient helper classes (dark-mode-aware) === */
    .bg-hero-gradient { background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 55%, #ea580c 100%); }
    .dark .bg-hero-gradient { background: linear-gradient(135deg, #080f1d 0%, #0f2545 50%, #431407 100%) !important; }
    .bg-stats-card { background: linear-gradient(135deg, #f0f9ff 0%, #fff7ed 100%); }
    .dark .bg-stats-card { background: linear-gradient(135deg, #111827 0%, #1a1f2e 100%) !important; }
    .bg-stats-card-alt { background: linear-gradient(135deg, #fff7ed 0%, #f0f9ff 100%); }
    .dark .bg-stats-card-alt { background: linear-gradient(135deg, #1a1f2e 0%, #111827 100%) !important; }
    .bg-table-header { background: linear-gradient(90deg, #f0f9ff, #fff7ed); }
    .dark .bg-table-header { background: linear-gradient(90deg, #111827, #1a1f2e) !important; }

    /* === Dark mode overrides === */
    .dark body { background: #0b1220; color: #e2e8f0; }
    /* Sidebar */
    .dark aside { background: linear-gradient(180deg, #0d1117 0%, #0f172a 40%, #131f30 100%) !important; }
    .dark aside .border-sky-700\/40 { border-color: rgba(30,41,59,0.6) !important; }
    /* Header */
    .dark header { background: #0f172a !important; border-color: #1e293b !important; }
    /* Background utilities */
    .dark .bg-white { background-color: #0f172a !important; }
    .dark .bg-slate-50 { background-color: #111827 !important; }
    .dark .bg-slate-100 { background-color: #1e293b !important; }
    .dark .bg-slate-200 { background-color: #334155 !important; }
    .dark .bg-indigo-50 { background-color: rgba(99,102,241,0.08) !important; }
    .dark .bg-fuchsia-50 { background-color: rgba(192,38,211,0.08) !important; }
    .dark .bg-sky-50 { background-color: rgba(14,165,233,0.08) !important; }
    .dark .bg-emerald-50 { background-color: rgba(16,185,129,0.08) !important; }
    .dark .bg-amber-50 { background-color: rgba(245,158,11,0.08) !important; }
    .dark .bg-orange-50 { background-color: rgba(249,115,22,0.08) !important; }
    .dark .bg-green-50 { background-color: rgba(34,197,94,0.08) !important; }
    .dark .bg-red-50 { background-color: rgba(239,68,68,0.08) !important; }
    .dark .bg-blue-50 { background-color: rgba(59,130,246,0.08) !important; }
    .dark .bg-violet-50 { background-color: rgba(139,92,246,0.08) !important; }
    .dark .bg-rose-50 { background-color: rgba(244,63,94,0.08) !important; }
    /* Badge backgrounds (100) */
    .dark .bg-sky-100 { background-color: rgba(14,165,233,0.18) !important; }
    .dark .bg-emerald-100 { background-color: rgba(16,185,129,0.18) !important; }
    .dark .bg-amber-100 { background-color: rgba(245,158,11,0.18) !important; }
    .dark .bg-indigo-100 { background-color: rgba(99,102,241,0.18) !important; }
    .dark .bg-fuchsia-100 { background-color: rgba(192,38,211,0.18) !important; }
    .dark .bg-orange-100 { background-color: rgba(249,115,22,0.18) !important; }
    .dark .bg-green-100 { background-color: rgba(34,197,94,0.18) !important; }
    .dark .bg-red-100 { background-color: rgba(239,68,68,0.18) !important; }
    .dark .bg-blue-100 { background-color: rgba(59,130,246,0.18) !important; }
    .dark .bg-violet-100 { background-color: rgba(139,92,246,0.18) !important; }
    .dark .bg-rose-100 { background-color: rgba(244,63,94,0.18) !important; }
    /* Border utilities */
    .dark .border-slate-100 { border-color: #1f2937 !important; }
    .dark .border-slate-200 { border-color: #2d3748 !important; }
    .dark .border-slate-300 { border-color: #475569 !important; }
    .dark .border-indigo-100 { border-color: rgba(99,102,241,0.25) !important; }
    .dark .border-fuchsia-100 { border-color: rgba(192,38,211,0.25) !important; }
    .dark .border-sky-100 { border-color: rgba(14,165,233,0.25) !important; }
    .dark .border-emerald-100 { border-color: rgba(16,185,129,0.25) !important; }
    .dark .border-amber-100 { border-color: rgba(245,158,11,0.25) !important; }
    .dark .border-orange-100 { border-color: rgba(249,115,22,0.25) !important; }
    .dark .border-red-100 { border-color: rgba(239,68,68,0.25) !important; }
    .dark .border-violet-100 { border-color: rgba(139,92,246,0.25) !important; }
    .dark .border-rose-100 { border-color: rgba(244,63,94,0.25) !important; }
    /* Text utilities */
    .dark .text-slate-900 { color: #f8fafc !important; }
    .dark .text-slate-800 { color: #e2e8f0 !important; }
    .dark .text-slate-700 { color: #cbd5e1 !important; }
    .dark .text-slate-600 { color: #94a3b8 !important; }
    .dark .text-slate-500 { color: #64748b !important; }
    .dark .text-slate-400 { color: #475569 !important; }
    .dark .text-indigo-700 { color: #a5b4fc !important; }
    .dark .text-fuchsia-700 { color: #f0abfc !important; }
    .dark .text-sky-700 { color: #38bdf8 !important; }
    .dark .text-sky-600 { color: #0ea5e9 !important; }
    .dark .text-emerald-700 { color: #6ee7b7 !important; }
    .dark .text-emerald-600 { color: #34d399 !important; }
    .dark .text-amber-700 { color: #fcd34d !important; }
    .dark .text-orange-700 { color: #fb923c !important; }
    .dark .text-green-700 { color: #86efac !important; }
    .dark .text-green-600 { color: #4ade80 !important; }
    .dark .text-red-700 { color: #fca5a5 !important; }
    .dark .text-red-600 { color: #f87171 !important; }
    .dark .text-blue-700 { color: #93c5fd !important; }
    .dark .text-violet-700 { color: #c4b5fd !important; }
    .dark .text-rose-700 { color: #fda4af !important; }
    .dark .text-rose-600 { color: #fb7185 !important; }
    /* Form elements */
    .dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="range"]) {
      background-color: #1e293b !important;
      border-color: #334155 !important;
      color: #e2e8f0 !important;
    }
    .dark input::placeholder { color: #64748b !important; }
    .dark select {
      background-color: #1e293b !important;
      border-color: #334155 !important;
      color: #e2e8f0 !important;
    }
    .dark textarea {
      background-color: #1e293b !important;
      border-color: #334155 !important;
      color: #e2e8f0 !important;
    }
    .dark textarea::placeholder { color: #64748b !important; }
    .dark input[type="checkbox"] { accent-color: #38bdf8; }
    /* Flash messages */
    .dark .flash-success { background: linear-gradient(90deg, rgba(6,78,59,0.5), rgba(6,95,70,0.5)) !important; border-left: 4px solid #059669; color: #a7f3d0; }
    .dark .flash-error   { background: linear-gradient(90deg, rgba(127,29,29,0.5), rgba(153,27,27,0.5)) !important; border-left: 4px solid #dc2626; color: #fca5a5; }
    .dark .flash-info    { background: linear-gradient(90deg, rgba(29,78,216,0.3), rgba(37,99,235,0.3)) !important; border-left: 4px solid #2563eb; color: #93c5fd; }
    /* Dark card helpers */
    .dark .dark-card { background: #111827 !important; border-color: #1f2937 !important; }
    .dark .dark-muted { background: #0f172a !important; border-color: #1f2937 !important; color: #cbd5e1 !important; }
    /* Hover states */
    .dark .hover\:bg-slate-50:hover,
    .dark .hover\:bg-slate-50\/50:hover,
    .dark .hover\:bg-slate-50\/60:hover,
    .dark .hover\:bg-slate-50\/70:hover,
    .dark .hover\:bg-slate-50\/80:hover { background-color: #1a2234 !important; }
    .dark .hover\:bg-slate-100:hover { background-color: #1f2937 !important; }
    .dark .hover\:bg-white:hover { background-color: #1e293b !important; }
    .dark .hover\:bg-sky-50:hover { background-color: rgba(14,165,233,0.1) !important; }
    .dark .hover\:bg-sky-50\/50:hover { background-color: rgba(14,165,233,0.07) !important; }
    .dark .hover\:bg-indigo-50:hover { background-color: rgba(99,102,241,0.1) !important; }
    .dark .hover\:bg-indigo-50\/50:hover { background-color: rgba(99,102,241,0.07) !important; }
    .dark .hover\:bg-orange-50:hover { background-color: rgba(249,115,22,0.08) !important; }
    .dark .hover\:bg-orange-50\/50:hover { background-color: rgba(249,115,22,0.06) !important; }
    .dark .hover\:bg-emerald-50:hover { background-color: rgba(16,185,129,0.08) !important; }
    .dark .hover\:bg-emerald-50\/50:hover { background-color: rgba(16,185,129,0.06) !important; }
    /* bg with opacity */
    .dark .bg-slate-50\/80 { background-color: rgba(15,23,42,0.8) !important; }
    .dark .bg-slate-50\/70 { background-color: rgba(15,23,42,0.7) !important; }
    .dark .bg-slate-50\/50 { background-color: rgba(15,23,42,0.5) !important; }
    .dark .bg-indigo-50\/50 { background-color: rgba(99,102,241,0.08) !important; }
    .dark .bg-sky-50\/50 { background-color: rgba(14,165,233,0.06) !important; }
    /* Table dividers */
    .dark .divide-slate-50 > :not([hidden]) ~ :not([hidden]) { border-color: #1f2937 !important; }
    .dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1f2937 !important; }
    .dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #2d3748 !important; }
    .dark table tbody > :not([hidden]) ~ :not([hidden]) { border-color: #1f2937 !important; }
    /* Focus ring */
    .dark .focus\:ring-sky-100:focus { --tw-ring-color: rgba(14,165,233,0.15) !important; }


/* Reconix overrides */
/* Reconix UI foundation */
:root {
  --rx-bg: #f4f7fb;
  --rx-surface: #ffffff;
  --rx-surface-soft: #f8fafc;
  --rx-border: #e5eaf1;
  --rx-text: #172033;
  --rx-muted: #687386;
  --rx-primary: #2563eb;
  --rx-primary-strong: #1d4ed8;
  --rx-accent: #06b6d4;
  --rx-sidebar: #0b1220;
  --rx-sidebar-soft: #111c31;
  --rx-shadow: 0 12px 35px rgba(15, 23, 42, .08);
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 80% -10%, rgba(37, 99, 235, .09), transparent 28rem),
    var(--rx-bg);
  color: var(--rx-text);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}
::selection { background: rgba(37, 99, 235, .18); }
[x-cloak] { display: none !important; }

.rx-sidebar {
  background:
    radial-gradient(circle at 30% 0%, rgba(37, 99, 235, .28), transparent 18rem),
    linear-gradient(180deg, var(--rx-sidebar) 0%, #0b1426 55%, #0a1020 100%);
}
.rx-brand-mark {
  background: linear-gradient(145deg, #60a5fa 0%, #2563eb 48%, #22d3ee 100%);
  box-shadow: 0 10px 28px rgba(37, 99, 235, .36), inset 0 1px 0 rgba(255,255,255,.35);
}
.rx-sidebar-label {
  color: rgba(148, 163, 184, .75);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 2.65rem;
  padding: .66rem .8rem;
  border: 1px solid transparent;
  border-radius: .85rem;
  color: #aebbd0;
  font-size: .875rem;
  font-weight: 560;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,.065);
  border-color: rgba(255,255,255,.055);
  transform: translateX(2px);
}
.nav-link.active {
  color: #fff;
  background: linear-gradient(100deg, rgba(37,99,235,.28), rgba(6,182,212,.10));
  border-color: rgba(96,165,250,.20);
  box-shadow: inset 3px 0 0 #60a5fa;
}
.nav-link.active svg { color: #7dd3fc; }
.rx-header {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226,232,240,.82);
}
.rx-page-shell { max-width: 1480px; margin: 0 auto; }
.rx-panel {
  background: rgba(255,255,255,.94);
  border: 1px solid var(--rx-border);
  border-radius: 1.15rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.rx-panel-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.rx-panel-hover:hover { transform: translateY(-2px); box-shadow: var(--rx-shadow); border-color: #d7e0eb; }
.rx-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 20%, rgba(34,211,238,.20), transparent 15rem),
    radial-gradient(circle at 60% 120%, rgba(96,165,250,.25), transparent 22rem),
    linear-gradient(120deg, #0f172a 0%, #172554 48%, #1d4ed8 100%);
  box-shadow: 0 20px 50px rgba(30,64,175,.16);
}
.rx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to left, #000, transparent 75%);
}
.rx-stat-value { letter-spacing: -.045em; }
.rx-primary-button {
  background: linear-gradient(110deg, #2563eb 0%, #1d4ed8 55%, #0891b2 115%);
  box-shadow: 0 10px 24px rgba(37,99,235,.22);
}
.rx-primary-button:hover { filter: brightness(1.04); box-shadow: 0 13px 28px rgba(37,99,235,.28); }
.rx-icon-button { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.rx-input,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border-color: #dce3ec !important;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.025);
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.11) !important;
  outline: none !important;
}
.flash-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.flash-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.flash-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }
.task-refresh-fade { animation: softFadeIn 280ms ease-out; }
@keyframes softFadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

/* Authentication screens */
.rx-auth-bg {
  background:
    radial-gradient(circle at 18% 22%, rgba(34,211,238,.22), transparent 24rem),
    radial-gradient(circle at 80% 78%, rgba(59,130,246,.24), transparent 28rem),
    linear-gradient(135deg, #07101f 0%, #0f1d38 54%, #172554 100%);
}
.rx-auth-card {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 28px 80px rgba(2,6,23,.30);
  backdrop-filter: blur(18px);
}

/* Dark mode compatibility for existing templates */
.dark {
  --rx-bg: #080d18;
  --rx-surface: #0f172a;
  --rx-surface-soft: #111c2f;
  --rx-border: #243147;
  --rx-text: #e7edf7;
  --rx-muted: #94a3b8;
}
.dark body { background: radial-gradient(circle at 80% -10%, rgba(37,99,235,.12), transparent 28rem), var(--rx-bg); color: var(--rx-text); }
.dark .rx-header { background: rgba(12,19,34,.86); border-color: rgba(36,49,71,.9); }
.dark .rx-panel { background: rgba(15,23,42,.94); border-color: var(--rx-border); }
.dark .bg-white { background-color: #0f172a !important; }
.dark .bg-slate-50 { background-color: #111827 !important; }
.dark .bg-slate-100 { background-color: #1e293b !important; }
.dark .bg-slate-200 { background-color: #334155 !important; }
.dark .text-slate-900 { color: #f8fafc !important; }
.dark .text-slate-800 { color: #e5edf8 !important; }
.dark .text-slate-700 { color: #d6e0ee !important; }
.dark .text-slate-600 { color: #bdc9d9 !important; }
.dark .text-slate-500 { color: #94a3b8 !important; }
.dark .text-slate-400 { color: #7f8da3 !important; }
.dark .text-slate-300 { color: #64748b !important; }
.dark .border-slate-100 { border-color: #1f2b40 !important; }
.dark .border-slate-200 { border-color: #2b3950 !important; }
.dark .border-slate-300 { border-color: #40506a !important; }
.dark input:not([type="checkbox"]):not([type="radio"]),
.dark select,
.dark textarea { background-color: #0b1324 !important; border-color: #334155 !important; color: #e2e8f0 !important; }
.dark .hover\:bg-slate-50:hover, .dark .hover\:bg-slate-100:hover { background-color: #182337 !important; }
.dark .divide-slate-50 > :not([hidden]) ~ :not([hidden]),
.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1f2b40 !important; }
.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #2b3950 !important; }
.dark .bg-stats-card, .dark .bg-stats-card-alt { background: linear-gradient(135deg, #101a2e, #111827) !important; }
.dark .bg-table-header { background: #111c2f !important; }
.dark .flash-success { background: rgba(6,78,59,.25); border-color: rgba(52,211,153,.35); color: #6ee7b7; }
.dark .flash-error { background: rgba(127,29,29,.22); border-color: rgba(248,113,113,.35); color: #fca5a5; }
.dark .flash-info { background: rgba(30,64,175,.22); border-color: rgba(96,165,250,.35); color: #93c5fd; }