/* Header height token (referenced by dropdown toggles) */
:root {
  --app-header-height: 56px;
}

/* ===========================================
   SHARED HEADER UTILITIES
   =========================================== */

/* Icon button used in all headers */
.header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  color: rgba(255,255,255,0.85);
  background: transparent;
  border: none;
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
  flex-shrink: 0;
}

.header-icon-btn:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.header-icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
}

/* Dark-background variant (for public header on #231f20) */
.header-icon-btn-dark {
  color: rgba(255,255,255,0.6);
}

.header-icon-btn-dark:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
}

/* Vertical separator between header groups */
.header-separator {
  width: 1px;
  height: 1.5rem;
  background: rgba(255,255,255,0.2);
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.header-separator-dark {
  background: rgba(255,255,255,0.1);
}

/* ===========================================
   PUBLIC MARKETING HEADER (matches authority website)
   =========================================== */
/* Default: solid dark brand bar (legible on every page). */
.public-header {
  background: var(--bf-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Homepage (top of page): transparent overlay with a top scrim, so the hero
   illustration shows behind the header — matches the authority website. */
.public-header.is-home {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0) 100%);
  border-bottom-color: transparent;
}

/* Scrolled: always solid dark (overrides the homepage transparency). */
.public-header.is-scrolled {
  background: var(--bf-dark);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

.public-util {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.public-util:hover { color: #fff; }
.public-util-strong { font-weight: 600; color: #fff; }

.public-util-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.public-util-icon:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.public-divider { width: 1px; height: 1.25rem; background: rgba(255, 255, 255, 0.18); }

.public-nav-link {
  position: relative;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  padding: 0.25rem 0;
  transition: color 0.2s ease;
}
.public-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--bf-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}
.public-nav-link:hover { color: #fff; }
.public-nav-link:hover::after { transform: scaleX(1); }

.public-nav-link-mobile {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  padding: 0.6rem 0.25rem;
  border-radius: 0.375rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.public-nav-link-mobile:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }

/* Language selector toggle on the dark public header */
.public-header .bf-dropdown-toggle { color: rgba(255, 255, 255, 0.82) !important; }
.public-header .bf-dropdown-toggle:hover { color: #fff !important; background: rgba(255, 255, 255, 0.1) !important; }
.public-header .public-dropdown .bf-dropdown-menu { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important; border: 1px solid rgba(0, 0, 0, 0.04); }

/* ===========================================
   SEARCH POPUP (matches authority website)
   =========================================== */
.search-popup {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bf-fade-in 0.18s ease-out;
}

.search-popup-inner {
  position: relative;
  width: 100%;
  max-width: 720px;
  padding: 0 1rem;
}

.search-popup-input {
  width: 100%;
  padding: 1rem 3.5rem 1rem 1.25rem;
  font-size: 1.25rem;
  background: transparent;
  color: #ffffff;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.45);
  outline: none;
  transition: border-color 0.2s ease;
}

.search-popup-input:focus { border-bottom-color: var(--bf-primary); }
.search-popup-input::placeholder { color: rgba(255, 255, 255, 0.55); }

.search-popup-close {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  transition: color 0.2s ease;
}

.search-popup-close:hover { color: var(--bf-primary); }

[dir="rtl"] .search-popup-close { right: auto; left: 1.5rem; }
[dir="rtl"] .search-popup-input { padding: 1rem 1.25rem 1rem 3.5rem; }

@keyframes bf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Dark mode header adjustments */
[data-theme="dark"] .header-separator {
  background: rgba(255,255,255,0.1);
}

[data-theme="dark"] .header-icon-btn {
  color: rgba(255,255,255,0.7);
}

[data-theme="dark"] .header-icon-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* Sticky Footer - Ensures footer stays at bottom */
html, body, #app {
  min-height: 100vh;
}

#app {
  display: flex;
  flex-direction: column;
}

/* Blob animation for landing page */
@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

/* Blazor Error UI */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1zbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JN)
}

/* Dropdown shared styles - lighter design */
.bf-dropdown-toggle {
  /* Base layout */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  height: calc(var(--app-header-height) - 14px);

  /* Lighter appearance */
  background: transparent;
  color: var(--bf-primary);
  border: none;
  box-shadow: none;
  transition: background-color .15s ease, color .15s ease;
}

.bf-dropdown-toggle:hover,
.bf-dropdown-toggle:focus {
  background: rgba(0,0,0,0.03);
  outline: none;
}

.bf-dropdown-toggle[aria-expanded="true"] {
  background: rgba(0,0,0,0.04);
}

/* Dropdown menu - lighter */
.bf-dropdown-menu {
  background: #ffffff;
  color: #111827; /* gray-900 */
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(16,24,40,0.06); /* subtle shadow */
  overflow: hidden;
  min-width: 12rem;
  border: none;
  transition: transform .12s ease, opacity .12s ease;
  transform-origin: top right;
}

.bf-dropdown-menu[hidden] {
  display: none;
}

.bf-dropdown-menu button,
.bf-dropdown-menu a {
  display: block;
  width: 100%;
  text-align: start; /* Changed from 'left' to 'start' for RTL support */
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 0.95rem;
}

.bf-dropdown-menu button:hover,
.bf-dropdown-menu a:hover {
  background: rgba(15, 23, 42, 0.03); /* very light hover */
}

.bf-dropdown-menu .menu-item-muted {
  color: #6B7280; /* gray-500 for secondary text */
}

.bf-dropdown-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.02); /* very subtle backdrop */
  z-index: 40;
}

/* Ensure menus appear above overlay */
.bf-dropdown-wrapper { position: relative; }
.bf-dropdown-menu { z-index: 50; position: absolute; }

/* Small utility: compact dropdown variant */
.bf-dropdown-compact {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  height: calc(var(--app-header-height) - 18px);
}

/* Accessibility focus */
.bf-dropdown-toggle:focus-visible {
  box-shadow: 0 0 0 4px rgba(139,92,246,0.12);
}

/* Dark dropdown variant that uses theme dark color */
.bf-dropdown-menu.bf-dropdown-dark {
  background: var(--bf-primary-700);
  color: var(--bf-primary-text, #ffffff);
  border-color: rgba(255,255,255,0.06);
}

.bf-dropdown-menu.bf-dropdown-dark button,
.bf-dropdown-menu.bf-dropdown-dark a {
  color: var(--bf-primary-text, #ffffff);
}

.bf-dropdown-menu.bf-dropdown-dark button:hover,
.bf-dropdown-menu.bf-dropdown-dark a:hover {
  background: rgba(255,255,255,0.06);
}

/* White dropdown variant used in header */
.bf-dropdown-white {
  background: #ffffff;
  color: #111827; /* gray-900 */
  border: 1px solid rgba(31,41,55,0.06);
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(16,24,40,0.04);
}

.bf-dropdown-white button,
.bf-dropdown-white a {
  color: inherit;
}

.bf-dropdown-white button:hover,
.bf-dropdown-white a:hover {
  background: rgba(15, 23, 42, 0.03); /* very light hover */
}

/* Dark dropdown variant used in header */
.bf-dropdown-dark {
  background: var(--bf-primary-700);
  color: var(--bf-primary-text, #ffffff);
  border-radius: 0.5rem;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.bf-dropdown-dark button,
.bf-dropdown-dark a {
  color: var(--bf-primary-text, #ffffff);
}

.bf-dropdown-dark button:hover,
.bf-dropdown-dark a:hover {
  background: rgba(255,255,255,0.06);
}

/* Ensure compatibility when MenuClass is combined with bf-dropdown-menu */
.bf-dropdown-menu.bf-dropdown-dark {
  background: var(--bf-primary-700);
  color: var(--bf-primary-text, #ffffff);
  border-color: rgba(255,255,255,0.06);
}

/* Dark state for the entire dropdown (toggle + menu) */
.bf-dropdown-dark.bf-dropdown-wrapper {
  background: var(--bf-primary-700);
  color: var(--bf-primary-text, #ffffff);
}

/* End of dropdown styles */

/* ===========================================
   SIDEBAR MINIMIZER
   =========================================== */

/* ---- Sidebar link styles ---- */
.sidebar-link {
  border: none;
  text-decoration: none;
}

.sidebar-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
  font-size: 1rem;
  color: #6b7280; /* gray-500 */
}

.sidebar-link-indicator {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  border-radius: 0 3px 3px 0;
  background: var(--bf-primary);
  transition: height 0.2s ease;
}

[dir="rtl"] .sidebar-link-indicator {
  left: auto;
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Hover state — subtle tinted background */
.sidebar-link:hover {
  background: var(--bf-primary-50, rgba(130,188,0,0.06)) !important;
  color: var(--bf-primary) !important;
}

.sidebar-link:hover .sidebar-link-icon {
  background: var(--bf-primary-100, rgba(130,188,0,0.12));
  color: var(--bf-primary);
}

.sidebar-link:hover .sidebar-text {
  color: var(--bf-primary) !important;
}

/* Danger link hover */
.sidebar-link-danger:hover {
  background: rgba(var(--bf-danger-rgb),0.06) !important;
  color: var(--bf-danger) !important;
}

.sidebar-link-danger:hover .sidebar-link-icon {
  background: rgba(var(--bf-danger-rgb),0.10);
  color: var(--bf-danger);
}

.sidebar-link-danger:hover .sidebar-text {
  color: var(--bf-danger) !important;
}

/* Active state — primary color accent */
.sidebar-link-active {
  background: var(--bf-primary-50, rgba(130,188,0,0.08)) !important;
  color: var(--bf-primary) !important;
  font-weight: 600 !important;
}

.sidebar-link-active .sidebar-link-icon {
  background: var(--bf-primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(130,188,0,0.3);
}

.sidebar-link-active .sidebar-link-indicator {
  height: 0;
}

.sidebar-link-active .sidebar-text {
  color: var(--bf-primary) !important;
}

/* Danger active */
.sidebar-link-active-danger {
  background: rgba(var(--bf-danger-rgb),0.06) !important;
  color: var(--bf-danger) !important;
}

.sidebar-link-active-danger .sidebar-link-icon {
  background: var(--bf-danger-strong);
  color: #fff;
  box-shadow: 0 2px 6px rgba(var(--bf-danger-rgb),0.3);
}

.sidebar-link-active-danger .sidebar-link-indicator {
  height: 0;
  background: var(--bf-danger-strong);
}

.sidebar-link-active-danger .sidebar-text {
  color: var(--bf-danger) !important;
}

/* ---- Custom scrollbar for sidebar ---- */
aside::-webkit-scrollbar {
  width: 4px;
}

aside::-webkit-scrollbar-track {
  background: transparent;
}

aside::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 4px;
}

aside::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.2);
}

/* When sidebar has .sidebar-mini, shrink to icon-only */
.sidebar-mini {
  width: 4rem !important; /* w-16 */
}

.sidebar-mini .sidebar-text {
  display: none;
}

.sidebar-mini .sidebar-section-header {
  display: none;
}

.sidebar-mini .sidebar-link {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.sidebar-mini .sidebar-link-icon {
  margin: 0;
}

.sidebar-mini .sidebar-link-indicator {
  display: none;
}

/* Tooltip on hover when minimized */
.sidebar-mini .sidebar-link {
  position: relative;
}

.sidebar-mini .sidebar-link:hover .sidebar-tooltip {
  display: block;
}

.sidebar-tooltip {
  display: none;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.5rem;
  padding: 0.25rem 0.75rem;
  background: #1f2937;
  color: #fff;
  font-size: 0.75rem;
  border-radius: 0.375rem;
  white-space: nowrap;
  z-index: 60;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

[dir="rtl"] .sidebar-tooltip {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 0.5rem;
}

/* ===========================================
   DARK MODE (scoped to data-theme="dark")
   =========================================== */

[data-theme="dark"] {
  color-scheme: dark;
}

/* Body / root backgrounds */
[data-theme="dark"] body,
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-white {
  background-color: #111827 !important;
  color: #e5e7eb !important;
}

[data-theme="dark"] .bg-gray-100 {
  background-color: #1f2937 !important;
}

[data-theme="dark"] .bg-gray-200 {
  background-color: #374151 !important;
}

/* Text colors */
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 {
  color: #e5e7eb !important;
}

[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500 {
  color: #9ca3af !important;
}

[data-theme="dark"] .text-gray-400 {
  color: #6b7280 !important;
}

[data-theme="dark"] .text-black {
  color: #f3f4f6 !important;
}

/* Borders */
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-100 {
  border-color: #374151 !important;
}

[data-theme="dark"] .border-gray-300 {
  border-color: #4b5563 !important;
}

/* Cards and surfaces */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow-lg {
  background-color: #1f2937 !important;
}

/* Sidebar dark mode */
[data-theme="dark"] aside {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}

[data-theme="dark"] aside nav a {
  color: #d1d5db !important;
}

[data-theme="dark"] .sidebar-link-icon {
  color: #9ca3af;
}

/* Active sidebar link in dark mode */
[data-theme="dark"] .sidebar-link-active {
  background: rgba(130,188,0,0.12) !important;
  color: var(--bf-primary) !important;
}

[data-theme="dark"] .sidebar-link-active .sidebar-link-icon {
  background: var(--bf-primary) !important;
  color: #fff !important;
}

[data-theme="dark"] .sidebar-link-active .sidebar-text {
  color: var(--bf-primary) !important;
}

[data-theme="dark"] .sidebar-link-active-danger {
  background: rgba(var(--bf-danger-rgb),0.12) !important;
  color: var(--bf-danger-on-dark) !important;
}

[data-theme="dark"] .sidebar-link-active-danger .sidebar-link-icon {
  background: var(--bf-danger-strong) !important;
  color: #fff !important;
}

[data-theme="dark"] .sidebar-link-active-danger .sidebar-text {
  color: var(--bf-danger-on-dark) !important;
}

/* Hover in dark mode */
[data-theme="dark"] aside nav a:hover {
  background-color: rgba(130,188,0,0.10) !important;
  color: var(--bf-primary) !important;
}

[data-theme="dark"] .sidebar-link-danger:hover {
  background-color: rgba(var(--bf-danger-rgb),0.10) !important;
  color: var(--bf-danger-on-dark) !important;
}

/* Dark scrollbar */
[data-theme="dark"] aside::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
}

[data-theme="dark"] aside::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.15);
}

/* Sidebar section headers */
[data-theme="dark"] aside .text-gray-400 {
  color: #6b7280 !important;
}

[data-theme="dark"] aside .border-gray-100 {
  border-color: #374151 !important;
}

/* Inputs and form controls */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: #1f2937 !important;
  color: #e5e7eb !important;
  border-color: #374151 !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #6b7280 !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--bf-primary) !important;
  box-shadow: 0 0 0 3px rgba(130,188,0,0.15) !important;
}

/* Tables */
[data-theme="dark"] table {
  color: #e5e7eb !important;
}

[data-theme="dark"] thead {
  background-color: #1f2937 !important;
}

[data-theme="dark"] th {
  color: #9ca3af !important;
  border-color: #374151 !important;
}

[data-theme="dark"] td {
  border-color: #374151 !important;
}

[data-theme="dark"] tbody tr:hover {
  background-color: rgba(130,188,0,0.05) !important;
}

[data-theme="dark"] tbody tr:nth-child(even) {
  background-color: rgba(255,255,255,0.02) !important;
}

/* Dropdown dark overrides */
[data-theme="dark"] .bf-dropdown-menu {
  background-color: #1f2937 !important;
  color: #e5e7eb !important;
}

[data-theme="dark"] .bf-dropdown-menu button,
[data-theme="dark"] .bf-dropdown-menu a {
  color: #e5e7eb !important;
}

[data-theme="dark"] .bf-dropdown-menu button:hover,
[data-theme="dark"] .bf-dropdown-menu a:hover {
  background-color: #374151 !important;
}

[data-theme="dark"] .bf-dropdown-menu.bf-dropdown-white {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}

[data-theme="dark"] .bf-dropdown-toggle {
  color: #e5e7eb !important;
}

[data-theme="dark"] .bf-dropdown-toggle:hover {
  background-color: rgba(255,255,255,0.05) !important;
}

/* Alert / badge dark override */
[data-theme="dark"] .bg-green-50,
[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-yellow-50,
[data-theme="dark"] .bg-red-50 {
  background-color: rgba(255,255,255,0.05) !important;
}

/* Stat cards */
[data-theme="dark"] .card-bf-primary .card-icon {
  background-color: rgba(130,188,0,0.15) !important;
}

/* Modal / dialog dark mode */
[data-theme="dark"] .fixed .bg-white {
  background-color: #1f2937 !important;
}

/* Hover states for gray backgrounds */
[data-theme="dark"] .hover\:bg-gray-100:hover,
[data-theme="dark"] .hover\:bg-gray-50:hover {
  background-color: #374151 !important;
}

/* Dark mode - the portal sticky footer */
[data-theme="dark"] footer.portal-footer {
  background-color: #0f1419 !important;
  border-color: #1f2937 !important;
  color: #9ca3af !important;
}

/* Tooltip in dark mode */
[data-theme="dark"] .sidebar-tooltip {
  background: #374151;
  color: #f3f4f6;
}

/* Pagination in dark mode */
[data-theme="dark"] .bg-white.border {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #e5e7eb !important;
}

/* Search inputs */
[data-theme="dark"] .bg-white.rounded-lg {
  background-color: #1f2937 !important;
}

/* Ensure red danger text stays visible */
[data-theme="dark"] .text-red-600 {
  color: var(--bf-danger-strong) !important;
}
[data-theme="dark"] .text-red-500 {
  color: var(--bf-danger-on-dark) !important;
}
[data-theme="dark"] .hover\:\!bg-red-50:hover {
  background-color: rgba(var(--bf-danger-rgb),0.1) !important;
}

/* Loading spinner stays visible */
[data-theme="dark"] .page-loader {
  background: #111827 !important;
}
[data-theme="dark"] .page-loader .spinner {
  border-color: #374151 !important;
  border-top-color: var(--bf-primary) !important;
}

/* Dark mode transition for smooth switching */
[data-theme="dark"] * {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Public portal: purple link colors in dark mode */
[data-theme="dark"] .text-purple-600 {
  color: #a78bfa !important; /* purple-400, readable on dark bg */
}
[data-theme="dark"] .hover\:text-purple-800:hover {
  color: #c4b5fd !important; /* purple-300, readable on dark bg */
}

/* Nav register outline button: white in dark mode (overrides purple) */
[data-theme="dark"] nav a.border-purple-600 {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}
[data-theme="dark"] nav a.border-purple-600:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Generic hover:bg-purple-50 (other than nav register) */
[data-theme="dark"] .hover\:bg-purple-50:hover {
  background-color: rgba(139, 92, 246, 0.15) !important;
}

/* Alert / message backgrounds — semantic tint instead of near-transparent */
[data-theme="dark"] .bg-red-50 {
  background-color: rgba(var(--bf-danger-rgb),0.12) !important;
}
[data-theme="dark"] .bg-green-50 {
  background-color: rgba(34, 197, 94, 0.12) !important;
}
[data-theme="dark"] .border-red-200 {
  border-color: rgba(var(--bf-danger-rgb),0.35) !important;
}
[data-theme="dark"] .border-green-200 {
  border-color: rgba(34, 197, 94, 0.35) !important;
}

/* Red text — lighten for dark backgrounds */
[data-theme="dark"] .text-red-800,
[data-theme="dark"] .text-red-900 {
  color: var(--bf-danger-on-dark-soft) !important; /* red-300 */
}

/* Green text — not covered at all in base dark mode rules */
[data-theme="dark"] .text-green-900,
[data-theme="dark"] .text-green-800 {
  color: #86efac !important; /* green-300 */
}
[data-theme="dark"] .text-green-700,
[data-theme="dark"] .text-green-600 {
  color: #4ade80 !important; /* green-400 */
}

/* hover:text-gray-600 — don't darken icons/text on hover in dark mode */
[data-theme="dark"] .hover\:text-gray-600:hover {
  color: #d1d5db !important; /* gray-300, stays visible */
}

/* White contrast buttons on brand-colored hero / CTA sections — stay white in dark mode */
[data-theme="dark"] .bg-bf-primary a.bg-white,
[data-theme="dark"] .bg-bf-primary button.bg-white,
[data-theme="dark"] .from-bf-primary a.bg-white,
[data-theme="dark"] .from-bf-primary button.bg-white {
  background-color: #ffffff !important;
  color: var(--bf-primary) !important;
}
[data-theme="dark"] .bg-bf-primary a.hover\:bg-gray-50:hover,
[data-theme="dark"] .from-bf-primary a.hover\:bg-gray-50:hover,
[data-theme="dark"] .bg-bf-primary button.hover\:bg-gray-50:hover,
[data-theme="dark"] .from-bf-primary button.hover\:bg-gray-50:hover {
  background-color: #f3f4f6 !important;
}

/* Hero wave divider adapts to dark mode */
.hero-wave-fill {
  fill: #F9FAFB;
}
[data-theme="dark"] .hero-wave-fill {
  fill: #111827 !important;
}

/* Campaigns → CTA wave divider — fills with dark CTA background */
.campaigns-wave-fill {
  fill: var(--bf-dark, #222222);
}
[data-theme="dark"] .campaigns-wave-fill {
  fill: #1a1a1a !important;
}

/* ===== Public Index page — dark mode fixes ===== */

/* Service section cards: pill tags should be slightly raised from card bg */
[data-theme="dark"] .bg-white .bg-gray-50 {
  background-color: rgba(255,255,255,0.05) !important;
}

/* Icon / badge containers using inline var(--bf-primary-50) stay functional in dark */
[data-theme="dark"] .bg-bf-primary .bg-white {
  background-color: #1f2937 !important;
  color: #e5e7eb !important;
}

/* Campaign card right visual panel in dark mode */
[data-theme="dark"] .bg-bf-primary [style*="--bf-primary-50"] {
  background-color: rgba(130,188,0,0.1) !important;
}

/* Ensure body text is light in dark mode (override Web.styles.css) */
[data-theme="dark"] body {
  color: #e5e7eb !important;
}

/* Login / Register gradient background in dark mode */
[data-theme="dark"] .from-purple-50 {
  --tw-gradient-from: #111827 !important;
}
[data-theme="dark"] .to-purple-50 {
  --tw-gradient-to: #111827 !important;
}
[data-theme="dark"] .via-white {
  --tw-gradient-stops: var(--tw-gradient-from), #1f2937, var(--tw-gradient-to, transparent) !important;
}

/* Login / Register glassmorphism card in dark mode */
[data-theme="dark"] .bg-white\/80 {
  background-color: rgba(31, 41, 55, 0.9) !important;
}
[data-theme="dark"] .border-white\/20 {
  border-color: rgba(75, 85, 99, 0.4) !important;
}

/* Decorative blob colors in dark mode (login/register) */
[data-theme="dark"] .bg-purple-200 {
  background-color: #4c1d95 !important;
}
[data-theme="dark"] .bg-pink-200 {
  background-color: #831843 !important;
}
[data-theme="dark"] .bg-indigo-200 {
  background-color: #312e81 !important;
}

/* ===========================================
   THEME COLOR UTILITIES
   (replaces inline theme styles in razor files)
   =========================================== */

/* Brand primary gradient — used on accent bars and CTA buttons */
.bf-gradient-primary {
  background: linear-gradient(90deg, var(--bf-primary) 0%, var(--bf-primary-dark) 100%);
}

/* Soft primary-tinted surface (icon containers, hover backgrounds) */
.bf-bg-primary-soft {
  background-color: var(--bf-primary-50);
}

/* Pill / chip badge: soft primary background + primary-700 text */
.bf-chip-primary {
  background-color: var(--bf-primary-50);
  color: var(--bf-primary-700);
}

/* Primary icon color (replaces inline color: var(--bf-primary)) */
.bf-icon-primary {
  color: var(--bf-primary);
}

/* Faded primary color for decorative oversized icons */
.bf-icon-primary-faded {
  color: var(--bf-primary);
  opacity: 0.3;
}

/* Dark brand surface — public header, public CTA, login bottom band */
.bf-bg-dark-brand {
  background-color: var(--bf-dark, #222222);
}

/* Light text on dark brand surface */
.bf-text-on-dark { color: #f5f5f5; }
.bf-text-on-dark-muted { color: rgba(245, 245, 245, 0.78); }

/* Subtle top border on dark surfaces */
.bf-border-top-light { border-top: 1px solid rgba(255, 255, 255, 0.1); }

/* Hero image overlay (dark gradient for text readability) */
.bf-hero-image-overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.6) 100%);
}

/* Hero background — authority line-art illustration, darkened for white text.
   The gradient layer keeps a clean dark surface even if the image is absent. */
.bf-hero {
  background-color: var(--bf-dark, #222222);
  background-image:
    linear-gradient(to bottom, rgba(34,34,34,0.82) 0%, rgba(34,34,34,0.74) 45%, rgba(34,34,34,0.92) 100%),
    url('images/hero-bg.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

[data-theme="dark"] .bf-hero {
  background-color: #111111;
  background-image:
    linear-gradient(to bottom, rgba(17,17,17,0.86) 0%, rgba(17,17,17,0.80) 45%, rgba(17,17,17,0.94) 100%),
    url('images/hero-bg.jpg');
}


/* Authorizing spinner */
.bf-auth-spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.bf-auth-spinner {
  width: 48px;
  height: 48px;
  border: 6px solid #E5E7EB;
  border-top-color: var(--bf-primary);
  border-radius: 50%;
  animation: bf-spin 0.9s linear infinite;
}

@keyframes bf-spin {
  to { transform: rotate(360deg); }
}

/* Dropdown toggle theme variants — pair with .bf-dropdown-toggle */
.bf-toggle-default {
  background: #ffffff;
  color: var(--bf-primary-dark);
  border-color: rgba(31, 41, 55, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.bf-toggle-on-dark {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
}

.bf-toggle-on-primary {
  background: transparent;
  color: #ffffff;
}

/* User-menu toggle defaults (replaces inline default ToggleStyle) */
.bf-toggle-user-default {
  background: transparent;
  color: var(--bf-primary-dark);
  border-color: rgba(31, 41, 55, 0.08);
}

/* Avatar circle on dark / primary headers */
.bf-avatar-on-header {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}