/* Placeholder stylesheet to avoid 404. Add global/site-specific overrides here. */

/* Import app.css to preserve existing styles if needed */
@import url('app.css');

/* Small default fallback styles */
body {
  background-color: #ffffff;
  color: #111827;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Loader/spinner sizing used in the app */
svg.animate-spin { width: 3rem; height: 3rem; }

/* NOTE: All theme tokens (--bf-* and --bs-black) live in theme.css, which is
   loaded first in index.html. The rules below only consume those tokens. */

/* Default body text color (consumes the themed black) */
body {
  color: var(--bs-black);
}

/* Utility class overrides for common 'black' text classes (light mode only) */
:root:not([data-theme="dark"]) .text-black,
:root:not([data-theme="dark"]) .text-gray-900,
:root:not([data-theme="dark"]) .text-gray-800,
:root:not([data-theme="dark"]) .text-gray-700 {
  color: #231f20 !important;
}

/* Exclude brand-colored sections from the dark text override */
.bg-bf-primary .text-bf-primary-contrast,
.bg-bf-primary .text-bf-primary-contrast\/90,
.bg-bf-primary .text-bf-primary-contrast\/75,
.bg-bf-primary .text-bf-primary-contrast\/70 {
  color: var(--bf-primary-contrast) !important;
}

/* =======================
   Tailwind Purple Utilities Override
   (re-mapped to new lime green theme)
   ======================= */

/* Text color utilities */
.text-purple-50 { color: var(--bf-primary-50) !important; }
.text-purple-100 { color: var(--bf-primary-100) !important; }
.text-purple-200 { color: var(--bf-primary-200) !important; }
.text-purple-300 { color: var(--bf-primary-300) !important; }
.text-purple-400 { color: var(--bf-primary-400) !important; }
.text-purple-500 { color: var(--bf-primary-500) !important; }
.text-purple-600 { color: var(--bf-primary-600) !important; }
.text-purple-700 { color: var(--bf-primary-700) !important; }
.text-purple-800 { color: var(--bf-primary-800) !important; }
.text-purple-900 { color: var(--bf-primary-900) !important; }

/* Background utilities */
.bg-purple-50 { background-color: var(--bf-primary-50) !important; }
.bg-purple-100 { background-color: var(--bf-primary-100) !important; }
.bg-purple-200 { background-color: var(--bf-primary-200) !important; }
.bg-purple-300 { background-color: var(--bf-primary-300) !important; }
.bg-purple-400 { background-color: var(--bf-primary-400) !important; }
.bg-purple-500 { background-color: var(--bf-primary-500) !important; }
.bg-purple-600 { background-color: var(--bf-primary-600) !important; color: var(--bf-primary-text) !important; }
.bg-purple-700 { background-color: var(--bf-primary-700) !important; color: var(--bf-primary-text) !important; }
.bg-purple-800 { background-color: var(--bf-primary-800) !important; color: var(--bf-primary-text) !important; }
.bg-purple-900 { background-color: var(--bf-primary-900) !important; color: var(--bf-primary-text) !important; }

/* Border utilities */
.border-purple-50 { border-color: var(--bf-primary-50) !important; }
.border-purple-100 { border-color: var(--bf-primary-100) !important; }
.border-purple-200 { border-color: var(--bf-primary-200) !important; }
.border-purple-300 { border-color: var(--bf-primary-300) !important; }
.border-purple-400 { border-color: var(--bf-primary-400) !important; }
.border-purple-500 { border-color: var(--bf-primary-500) !important; }
.border-purple-600 { border-color: var(--bf-primary-600) !important; }
.border-purple-700 { border-color: var(--bf-primary-700) !important; }
.border-purple-800 { border-color: var(--bf-primary-800) !important; }
.border-purple-900 { border-color: var(--bf-primary-900) !important; }

/* Hover states */
.hover\:bg-purple-50:hover { background-color: var(--bf-primary-50) !important; }
.hover\:bg-purple-100:hover { background-color: var(--bf-primary-100) !important; }
.hover\:bg-purple-600:hover { background-color: var(--bf-primary-600) !important; color: var(--bf-primary-text) !important; }
.hover\:bg-purple-700:hover { background-color: var(--bf-primary-700) !important; color: var(--bf-primary-text) !important; }
.hover\:bg-purple-900:hover { background-color: var(--bf-primary-900) !important; color: var(--bf-primary-text) !important; }

.hover\:text-purple-50:hover { color: var(--bf-primary-50) !important; }
.hover\:text-purple-600:hover { color: var(--bf-primary-600) !important; }
.hover\:text-purple-700:hover { color: var(--bf-primary-700) !important; }
.hover\:text-purple-900:hover { color: var(--bf-primary-900) !important; }

.hover\:border-purple-500:hover { border-color: var(--bf-primary-500) !important; }
.hover\:border-purple-600:hover { border-color: var(--bf-primary-600) !important; }

/* Focus states */
.focus\:ring-purple-500:focus { --tw-ring-color: var(--bf-primary-500) !important; }
.focus\:ring-purple-600:focus { --tw-ring-color: var(--bf-primary-600) !important; }

/* Gradient utilities mapping */
.from-purple-50 { --tw-gradient-from: var(--bf-primary-50) !important; --tw-gradient-to: rgba(0,0,0,0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-purple-100 { --tw-gradient-from: var(--bf-primary-100) !important; --tw-gradient-to: rgba(0,0,0,0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-purple-200 { --tw-gradient-from: var(--bf-primary-200) !important; --tw-gradient-to: rgba(0,0,0,0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-purple-300 { --tw-gradient-from: var(--bf-primary-300) !important; --tw-gradient-to: rgba(0,0,0,0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-purple-600 { --tw-gradient-from: var(--bf-primary-600) !important; --tw-gradient-to: rgba(0,0,0,0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-purple-700 { --tw-gradient-from: var(--bf-primary-700) !important; --tw-gradient-to: rgba(0,0,0,0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }

.to-purple-200 { --tw-gradient-to: var(--bf-primary-200) !important; }
.to-purple-300 { --tw-gradient-to: var(--bf-primary-300) !important; }
.to-purple-800 { --tw-gradient-to: var(--bf-primary-800) !important; }
.to-purple-900 { --tw-gradient-to: var(--bf-primary-900) !important; }

.hover\:from-purple-700:hover { --tw-gradient-from: var(--bf-primary-700) !important; }
.hover\:to-purple-900:hover { --tw-gradient-to: var(--bf-primary-900) !important; }

/* bf-primary gradient utilities (used by modal headers etc.) */
.from-bf-primary { --tw-gradient-from: var(--bf-primary) !important; --tw-gradient-to: rgba(0,0,0,0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-bf-primary { --tw-gradient-to: var(--bf-primary) !important; }
.to-bf-primary\/80 { --tw-gradient-to: var(--bf-primary) !important; }
@supports (color: color-mix(in srgb, red 80%, transparent)) {
  .to-bf-primary\/80 { --tw-gradient-to: color-mix(in srgb, var(--bf-primary) 80%, transparent) !important; }
}

/* Buttons and CTA */
.bg-gradient-to-r.from-purple-600.to-purple-800,
.bg-gradient-to-br.from-purple-600.to-purple-800,
.bg-gradient-to-r.from-purple-700.to-purple-900,
.bg-gradient-to-br.from-purple-700.to-purple-900 {
  background: linear-gradient(90deg, var(--bf-primary) 0%, var(--bf-primary-dark) 100%) !important;
  color: var(--bf-primary-text) !important;
}

/* Utilities for explicit usage */
.bg-bf-primary { background-color: var(--bf-primary) !important; color: var(--bf-primary-contrast) !important; }
.text-bf-primary { color: var(--bf-primary) !important; }
.text-bf-primary-contrast { color: var(--bf-primary-contrast) !important; }
.border-bf-primary { border-color: var(--bf-primary) !important; }
.hover\:bg-bf-primary:hover { background-color: var(--bf-primary) !important; color: var(--bf-primary-contrast) !important; }
.hover\:text-bf-primary:hover { color: var(--bf-primary) !important; }
.hover\:text-bf-primary-contrast:hover { color: var(--bf-primary-contrast) !important; }

/* ===========================================
   THEMED bf-primary OPACITY / RING / FOCUS UTILITIES
   `bf-primary` is NOT a registered Tailwind color (only `purple` is),
   so its /opacity, ring and focus-border variants are not generated by
   the CDN. Without these explicit rules they render with no colour (tinted
   chips look empty, input focus rings fall back to the default blue).
   Opacity tints map to the live --bf-primary-N tint vars (computed from the
   active theme in app-utils.js), so everything tracks the configured theme.
   =========================================== */

/* Background tints */
.bg-bf-primary\/5  { background-color: var(--bf-primary-50)  !important; }
.bg-bf-primary\/10 { background-color: var(--bf-primary-100) !important; }
.bg-bf-primary\/20 { background-color: var(--bf-primary-200) !important; }

/* Border tints */
.border-bf-primary\/30 { border-color: var(--bf-primary-300) !important; }
.border-bf-primary\/40 { border-color: var(--bf-primary-400) !important; }
.border-bf-primary\/50 { border-color: var(--bf-primary-500) !important; }

/* Focus / selection rings (drive Tailwind's --tw-ring-color) */
.ring-bf-primary,
.focus\:ring-bf-primary:focus { --tw-ring-color: var(--bf-primary) !important; }
.ring-bf-primary\/40,
.focus\:ring-bf-primary\/40:focus { --tw-ring-color: var(--bf-primary-400) !important; }
.focus\:border-bf-primary:focus { border-color: var(--bf-primary) !important; }

/* Hover states */
.hover\:bg-bf-primary\/5:hover  { background-color: var(--bf-primary-50)  !important; }
.hover\:bg-bf-primary\/10:hover { background-color: var(--bf-primary-100) !important; }
.hover\:bg-bf-primary\/20:hover { background-color: var(--bf-primary-200) !important; }
.hover\:border-bf-primary\/30:hover { border-color: var(--bf-primary-300) !important; }
.hover\:border-bf-primary\/40:hover { border-color: var(--bf-primary-400) !important; }
.hover\:border-bf-primary\/50:hover { border-color: var(--bf-primary-500) !important; }

/* Group-hover states */
.group:hover .group-hover\:text-bf-primary { color: var(--bf-primary) !important; }
.group:hover .group-hover\:bg-bf-primary\/5  { background-color: var(--bf-primary-50)  !important; }
.group:hover .group-hover\:bg-bf-primary\/20 { background-color: var(--bf-primary-200) !important; }

/* Ensure icons inside purple backgrounds remain readable */
.bg-purple-100 i, 
.bg-purple-200 i, 
.bg-purple-300 i { 
  color: var(--bf-primary) !important; 
}

.bg-purple-600 i,
.bg-purple-700 i,
.bg-purple-800 i,
.bg-purple-900 i {
  color: var(--bf-primary-text) !important;
}

/* Ensure smooth transitions for theme changes */
[class*="purple"] { 
  transition: background-color .15s ease, color .15s ease, border-color .15s ease; 
}

/* Spinner colors */
.text-purple-600.animate-spin circle,
.text-purple-600.animate-spin path {
  color: var(--bf-primary) !important;
  stroke: var(--bf-primary) !important;
}

/* Badge/pill colors */
.bg-blue-100.text-blue-800 {
  background-color: rgba(59, 130, 246, 0.1) !important;
  color: rgb(30, 64, 175) !important;
}

/* Ring colors for focus */
.ring-purple-500 { --tw-ring-color: var(--bf-primary-500) !important; }
.ring-purple-600 { --tw-ring-color: var(--bf-primary-600) !important; }

/* End of file */

/* Public footer styles (tokens defined in theme.css) */
.bg-public-footer {
  background-color: var(--bf-public-footer) !important;
  color: var(--bf-public-footer-text) !important;
}

.text-public-footer-contrast { color: var(--bf-public-footer-text) !important; }

/* Ensure common gray text inside the dark footer becomes light for readability */
.bg-public-footer .text-gray-600,
.bg-public-footer .text-gray-500,
.bg-public-footer .text-gray-700,
.bg-public-footer .text-gray-900,
.bg-public-footer p,
.bg-public-footer span {
  color: rgba(245,245,245,0.92) !important;
}

/* Muted items slightly lighter */
.bg-public-footer .text-sm.text-gray-600 {
  color: rgba(245,245,245,0.78) !important;
}

/* Lighten small gray backgrounds (social icons) to be subtle on dark bg */
.bg-public-footer .bg-gray-100 {
  background-color: rgba(255,255,255,0.06) !important;
}

/* Ensure links remain visible and hover states still work */
.bg-public-footer a,
.bg-public-footer a:hover {
  color: var(--bf-primary-contrast) !important;
}

/* Dark mode: footer matches header (#222222) */
[data-theme="dark"] footer.mt-auto {
  background-color: #1a1a1a !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Admin card accent: make admin dashboard/cards use the theme primary color */
.card-bf-primary {
  /* nothing here; utility class for scoping */
}

.card-bf-primary .card-icon {
  background-color: var(--bf-primary-50) !important;
  color: var(--bf-primary) !important;
}

.card-bf-primary .card-badge {
  background-color: var(--bf-primary-100) !important;
  color: #000 !important;
}

/* Ensure badge text for any card is black (applies to guide/client/admin dashboards) */
.card-badge {
  color: #000 !important;
}

.card-bf-primary .card-link {
  color: var(--bf-primary) !important;
}

.card-bf-primary .card-button {
  background: linear-gradient(90deg, var(--bf-primary) 0%, var(--bf-primary-dark) 100%) !important;
  color: var(--bf-primary-contrast) !important;
}

/* ===========================================================================
   REUSABLE COMPONENT STYLES (centralised — neutral enterprise theme)
   Buttons / sections / chips / cards built on the design tokens above.
   =========================================================================== */

/* ---- Section bands ---- */
.bf-section            { background-color: var(--bf-surface); }
.bf-section-white      { background-color: var(--bf-white); }
.bf-section-light-gray { background-color: var(--bf-light-gray); }
.bf-section-dark       { background-color: var(--bf-dark); color: var(--bf-text-on-dark); }

/* ---- Buttons ---- */
.bf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--bf-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.bf-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(130, 188, 0, 0.35); }

/* Primary = brand green accent (used sparingly for key calls-to-action) */
.bf-btn-primary { background-color: var(--bf-primary); color: var(--bf-primary-text); box-shadow: var(--bf-shadow-sm); }
.bf-btn-primary:hover { background-color: var(--bf-primary-dark); box-shadow: var(--bf-shadow); transform: translateY(-1px); }

/* Dark = neutral primary action on light surfaces */
.bf-btn-dark { background-color: var(--bf-dark); color: #fff; box-shadow: var(--bf-shadow-sm); }
.bf-btn-dark:hover { background-color: var(--bf-dark-2); box-shadow: var(--bf-shadow); transform: translateY(-1px); }

/* Outline = secondary action */
.bf-btn-outline { background-color: transparent; color: var(--bf-text); border-color: var(--bf-border); }
.bf-btn-outline:hover { background-color: var(--bf-white); border-color: var(--bf-dark); color: var(--bf-dark); }

/* On the light-gray CTA band the default border (--bf-border) blends into the
   background, so give the secondary button a visible dark border + dark fill on hover. */
.bf-section-light-gray .bf-btn-outline { border-color: var(--bf-dark); color: var(--bf-dark); }
.bf-section-light-gray .bf-btn-outline:hover { background-color: var(--bf-dark); border-color: var(--bf-dark); color: #fff; }

/* ---- Card ---- */
.bf-card {
  background-color: var(--bf-white);
  border: 1px solid var(--bf-border-soft);
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-shadow-sm);
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.bf-card:hover { box-shadow: var(--bf-shadow-md); border-color: var(--bf-border); }

/* ---- Chips / pills ---- */
.bf-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--bf-radius-pill);
  background-color: var(--bf-surface);
  color: var(--bf-text-muted);
  border: 1px solid var(--bf-border-soft);
}

/* Eyebrow label above section titles */
.bf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bf-primary-dark);
}

/* Circular service icon (outline icon on a soft grey disc) */
.bf-service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-surface-2);
  color: #2b2b2b;
  font-size: 1.25rem;
}

/* Feature tag pill with a small green status dot */
.bf-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-surface);
  color: var(--bf-text-muted);
  border: 1px solid var(--bf-border-soft);
}
.bf-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-primary);
  flex-shrink: 0;
}

/* Text "→" call-to-action link (green accent) */
.bf-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bf-primary-dark);
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}
.bf-link-cta:hover { color: var(--bf-primary); gap: 0.65rem; }

/* Consistent text input */
.bf-input {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-sm);
  font-size: 0.9rem;
  background: #fff;
  color: var(--bf-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bf-input:focus {
  outline: none;
  border-color: var(--bf-primary);
  box-shadow: 0 0 0 3px rgba(130, 188, 0, 0.18);
}

/* RTL: flip directional chevrons/arrows inside links and buttons */
[dir="rtl"] .bf-link-cta .bi-chevron-right,
[dir="rtl"] .bf-btn .bi-chevron-right,
[dir="rtl"] .bf-btn .bi-arrow-right { transform: scaleX(-1); }

/* ---- Footer ---- */
.bf-footer {
  background-color: var(--bf-dark);
  color: var(--bf-text-on-dark);
}
.bf-footer-link-list {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}
.bf-footer-link-list:hover { color: #ffffff; }

/* Dark-mode adjustments for the reusable pieces */
[data-theme="dark"] .bf-footer            { background-color: #1a1a1a; }
[data-theme="dark"] .bf-section            { background-color: #111827; }
[data-theme="dark"] .bf-section-white      { background-color: #1f2937; }
[data-theme="dark"] .bf-section-light-gray { background-color: #1f2937; }
[data-theme="dark"] .bf-card               { background-color: #1f2937; border-color: #374151; }
[data-theme="dark"] .bf-chip               { background-color: rgba(255,255,255,0.05); color: #d1d5db; border-color: #374151; }
[data-theme="dark"] .bf-service-icon       { background-color: #374151; color: #e5e7eb; }
[data-theme="dark"] .bf-tag                { background-color: rgba(255,255,255,0.05); color: #d1d5db; border-color: #374151; }
[data-theme="dark"] .bf-input              { background-color: #1f2937; color: #e5e7eb; border-color: #374151; }
[data-theme="dark"] .bf-link-cta           { color: #86efac; }
[data-theme="dark"] .bf-link-cta:hover     { color: #bbf7d0; }
[data-theme="dark"] .bf-btn-outline        { color: #e5e7eb; border-color: #4b5563; }
[data-theme="dark"] .bf-btn-outline:hover  { background-color: rgba(255,255,255,0.06); border-color: #9ca3af; color: #fff; }

/* ===========================================
   Filter panel selects — add a chevron overlay to appearance-none
   <select>s inside a SearchBar filter panel (matches Retail UX).
   =========================================== */
.bf-filter-panel select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1rem;
  padding-inline-end: 2rem;
}
[dir="rtl"] .bf-filter-panel select {
  background-position: left 0.6rem center;
}

/* ===========================================
   DATA-VIZ TOOLTIPS (bar & line charts)
   Dark bubble built on theme tokens — replaces hard-coded
   #1f2937/#fff inline styles previously duplicated in the
   chart components.
   =========================================== */
.chart-tooltip,
.chart-tooltip-box {
  background: var(--bf-dark);
  color: var(--bf-white);
  font-size: 0.75rem;
  border-radius: var(--bf-radius-sm);
  box-shadow: var(--bf-shadow);
  white-space: nowrap;
  pointer-events: none;
}

/* Absolutely-positioned tooltip (bar chart) — directional offset
   stays inline; everything visual lives here. */
.chart-tooltip {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 12px;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 50;
}

/* Inner bubble inside the line-chart <foreignObject>. */
.chart-tooltip-box {
  padding: 6px 10px;
  text-align: center;
  width: fit-content;
  margin: 0 auto;
}

/* Little arrow pointing back at the column (bar chart). */
.chart-tooltip-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
}
.chart-tooltip-arrow-start { left: 100%; border-left-color: var(--bf-dark); }
.chart-tooltip-arrow-end { right: 100%; border-right-color: var(--bf-dark); }