/* Onyx Theme - Enhanced with Purple/Noir Palette */

/* ═══════════════════════════════════════════════════════════════════════════
   CSS VARIABLES - ONYX THEME PALETTE
   ═══════════════════════════════════════════════════════════════════════════ */

:root.theme-onyx {
  --onyx-bg-primary: #0a0a0a;          /* Pure black navbar */
  --onyx-bg-secondary: #1a1a1a;        /* Dark charcoal progress bar */
  --onyx-bg-surface: #141414;          /* Background surfaces */
  --onyx-text-light: #f5f5f5;          /* Light text on dark */
  --onyx-text-muted: #cccccc;          /* Muted text */
  --onyx-accent-primary: #bb86fc;      /* Purple accent */
  --onyx-accent-secondary: #ce93d8;    /* Light purple */
  --onyx-accent-warning: #ffb74d;      /* Warm amber */
  --onyx-accent-danger: #f48fb1;       /* Pink danger */
  --onyx-accent-success: #00e676;      /* Bright green */
  
  /* CTA Button Colors */
  --cta-finance: #FFAA32;      /* vivid amber */
  --cta-lifestyle: #32B5F9;    /* vivid cyan */
}

/* IMPORTANT: Apply onyx background to entire body */
body.theme-onyx,
.theme-onyx {
  background: #0a0a0a !important;
  color: #f5f5f5 !important;
}

/* Fix stats-wrapper transparency - remove any transparency effects */
.theme-onyx .stats-wrapper,
body.theme-onyx .stats-wrapper {
  background: none !important;
  backdrop-filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVBAR STYLING - ONYX THEME (Enhanced)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- Top-bar Onyx Variant: Advanced Purple Gradient ---------- */
.theme-onyx {
  --canopy-start: #0a0a0a;       /* pure black top */
  --canopy-end:   #1a1a1a;       /* dark charcoal bottom */
  --canopy-text:  #f5f5f5;       /* light text */
}

/* ---------- bar container with subtle texture overlay ---------- */
html body.theme-onyx .navbar,
html body.theme-onyx .health-nav-main,
html body.theme-onyx .tm-topbar,
body.theme-onyx .navbar,
body.theme-onyx .health-nav-main,
body.theme-onyx .tm-topbar,
.theme-onyx .navbar,
.theme-onyx .health-nav-main,
.theme-onyx .tm-topbar {
  background: linear-gradient(to bottom, var(--canopy-start) 0%, var(--canopy-end) 100%) !important;
  background-image: url('/img/texture-noise-light.png');         /* subtle texture overlay */
  background-blend-mode: overlay;                                /* keeps texture faint */
  border-bottom: 2px solid var(--onyx-bg-secondary) !important;
  box-shadow: 0 2px 8px rgba(187, 134, 252, 0.3) !important;
  color: var(--canopy-text) !important;
}

/* ---------- brand & basic links ---------- */
.theme-onyx .navbar-brand,
.theme-onyx .navbar a,
.theme-onyx .navbar .nav-link,
.theme-onyx .navbar .btn,
.theme-onyx .tm-topbar a,
.theme-onyx .tm-topbar .nav-link,
.theme-onyx .tm-topbar .btn {
  color: var(--onyx-text-light) !important;
  text-shadow: none !important;
}

/* Clean, flat TrueMetrics brand styling for onyx theme */
.theme-onyx .navbar-brand,
body.theme-onyx .navbar-brand {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  background: none !important;
  text-decoration: none !important;
}

/* ---------- bootstrap-icon + <i> reset (kills white squares) ---------- */
.theme-onyx .navbar i,
.theme-onyx .navbar .bi,
.theme-onyx .tm-topbar i,
.theme-onyx .tm-topbar .bi {
  color: var(--onyx-text-light) !important;
  background: none !important;
  fill: currentColor !important;
}

/* ---------- nav-pills ---------- */
.theme-onyx .nav-pills .nav-link {
  position: relative;
  border-radius: 8px !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
  color: var(--onyx-text-light) !important;
}

/* underline (appears on hover & active) */
.theme-onyx .nav-pills .nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--onyx-accent-primary);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.theme-onyx .nav-pills .nav-link:hover,
.theme-onyx .nav-pills .nav-link.active {
  background-color: rgba(187, 134, 252, 0.1) !important;
}

.theme-onyx .nav-pills .nav-link:hover::after,
.theme-onyx .nav-pills .nav-link.active::after {
  transform: scaleX(1);
}

/* ---------- navbar buttons ---------- */
.theme-onyx .navbar .btn-outline-secondary,
.theme-onyx .tm-topbar .btn-outline-secondary {
  border-color: var(--onyx-accent-primary) !important;
  color: var(--onyx-accent-primary) !important;
  background-color: transparent !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.theme-onyx .navbar .btn-outline-secondary:hover,
.theme-onyx .tm-topbar .btn-outline-secondary:hover {
  background-color: var(--onyx-accent-primary) !important;
  border-color: var(--onyx-accent-primary) !important;
  color: black !important;
}

/* Special override for navbar/topbar btn-outline-primary */
.theme-onyx .navbar .btn-outline-primary,
.theme-onyx .tm-topbar .btn-outline-primary {
  background-color: transparent !important;
  border-color: var(--onyx-accent-secondary) !important;
  color: var(--onyx-text-light) !important;
  padding: 0.25rem 0.45rem;
  box-shadow: none !important;
}

.theme-onyx .navbar .btn-outline-primary:hover,
.theme-onyx .tm-topbar .btn-outline-primary:hover {
  background-color: var(--onyx-accent-secondary) !important;
  border-color: var(--onyx-accent-secondary) !important;
  color: var(--onyx-text-light) !important;
}

/* Points display button in navbar */
.theme-onyx .navbar .points-display .btn-outline-success,
.theme-onyx .tm-topbar .points-display .btn-outline-success {
  background-color: transparent !important;
  border-color: var(--onyx-accent-primary) !important;
  color: var(--onyx-text-light) !important;
  box-shadow: none !important;
  padding: 0.25rem 0.55rem;
}

.theme-onyx .navbar .points-display .btn-outline-success:hover,
.theme-onyx .tm-topbar .points-display .btn-outline-success:hover {
  background-color: var(--onyx-accent-primary) !important;
  color: var(--onyx-text-light) !important;
}

/* Keep the tiny badge readable */
.theme-onyx .points-display .badge {
  background-color: var(--onyx-accent-warning) !important;
  color: black !important;
}

/* Kill default white fill on light buttons in navbar */
.theme-onyx .navbar .btn-light,
.theme-onyx .navbar .btn-white,
.theme-onyx .tm-topbar .btn-light,
.theme-onyx .tm-topbar .btn-white {
  background-color: transparent !important;
  border-color: var(--onyx-accent-primary) !important;
  color: var(--onyx-text-light) !important;
}

/* Nav links hover/focus brightness */
.theme-onyx .navbar .nav-link:hover,
.theme-onyx .navbar .nav-link:focus,
.theme-onyx .navbar .nav-pills .nav-link:hover,
.theme-onyx .tm-topbar .nav-link:hover,
.theme-onyx .tm-topbar .nav-link:focus {
  color: var(--onyx-accent-primary) !important;
  text-decoration: none;
}

/* Enhanced hover effects */
.theme-onyx .btn:hover {
  transition: all 0.2s ease-in-out !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESS STATS BAR - ONYX THEME
   ═══════════════════════════════════════════════════════════════════════════ */

.theme-onyx .progress-stats-bar,
body.theme-onyx .progress-stats-bar {
  background: var(--onyx-bg-secondary) !important;
  border-bottom: 1px solid var(--onyx-bg-primary) !important;
  color: var(--onyx-text-light) !important;
}

.theme-onyx .stat-label,
body.theme-onyx .stat-label {
  color: var(--onyx-text-muted) !important;
  font-weight: 600 !important;
}

.theme-onyx .stat-item,
body.theme-onyx .stat-item {
  color: var(--onyx-text-light) !important;
}

.theme-onyx .stat-item i,
body.theme-onyx .stat-item i {
  color: var(--onyx-accent-primary) !important;
}

.theme-onyx .stat-item span,
body.theme-onyx .stat-item span {
  color: var(--onyx-accent-primary) !important;
}

.theme-onyx .stat-item strong,
body.theme-onyx .stat-item strong {
  color: var(--onyx-text-light) !important;
  font-weight: 700 !important;
}

.theme-onyx .stat-divider,
body.theme-onyx .stat-divider {
  background-color: var(--onyx-bg-primary) !important;
}

.theme-onyx .clickable-stat:hover,
body.theme-onyx .clickable-stat:hover {
  background-color: rgba(187, 134, 252, 0.1) !important;
  border-radius: 6px !important;
  transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS & BADGES - ONYX THEME
   ═══════════════════════════════════════════════════════════════════════════ */

.theme-onyx .btn-outline-success,
body.theme-onyx .btn-outline-success {
  border-color: var(--onyx-accent-success) !important;
  color: var(--onyx-accent-success) !important;
  background-color: rgba(20, 20, 20, 0.9) !important;
}

.theme-onyx .btn-outline-success:hover,
body.theme-onyx .btn-outline-success:hover {
  background-color: var(--onyx-accent-success) !important;
  color: black !important;
}

.theme-onyx .btn-outline-info,
body.theme-onyx .btn-outline-info {
  border-color: var(--onyx-accent-secondary) !important;
  color: var(--onyx-accent-secondary) !important;
  background-color: rgba(20, 20, 20, 0.9) !important;
}

.theme-onyx .btn-outline-info:hover,
body.theme-onyx .btn-outline-info:hover {
  background-color: var(--onyx-accent-secondary) !important;
  color: black !important;
}

.theme-onyx .badge.bg-success,
.theme-onyx .badge-new,
body.theme-onyx .badge.bg-success,
body.theme-onyx .badge-new {
  background-color: var(--onyx-accent-primary) !important;
  color: black !important;
}

.theme-onyx .badge.bg-warning,
body.theme-onyx .badge.bg-warning {
  background-color: var(--onyx-accent-warning) !important;
  color: black !important;
}

.theme-onyx .badge.bg-danger,
body.theme-onyx .badge.bg-danger {
  background-color: var(--onyx-accent-danger) !important;
  color: black !important;
}

.theme-onyx .bi-star-fill,
.theme-onyx .bi-fire,
.theme-onyx .bi-award-fill,
body.theme-onyx .bi-star-fill,
body.theme-onyx .bi-fire,
body.theme-onyx .bi-award-fill {
  color: var(--onyx-accent-warning) !important;
}

/* Getting Started Dismiss Button */
.theme-onyx .getting-started-card #dismissGettingStarted,
body.theme-onyx .getting-started-card #dismissGettingStarted {
  border-color: var(--onyx-accent-primary) !important;
  color: var(--onyx-accent-primary) !important;
  background-color: rgba(20, 20, 20, 0.8) !important;
}

.theme-onyx .getting-started-card #dismissGettingStarted:hover,
body.theme-onyx .getting-started-card #dismissGettingStarted:hover {
  background-color: var(--onyx-accent-primary) !important;
  color: black !important;
}

/* Process Cards for Health Page */
.theme-onyx .process-card,
body.theme-onyx .process-card {
  background: rgba(20, 20, 20, 0.95) !important;
  border-color: rgba(171, 71, 188, 0.3) !important;
  color: #f5f5f5 !important;
}

.theme-onyx .process-card:hover,
body.theme-onyx .process-card:hover {
  background: rgba(25, 25, 25, 0.98) !important;
  border-color: rgba(171, 71, 188, 0.6) !important;
  box-shadow: 0 8px 25px rgba(171, 71, 188, 0.2) !important;
}

.theme-onyx .process-number,
body.theme-onyx .process-number {
  background: linear-gradient(135deg, #ab47bc, #8e24aa) !important;
  color: white !important;
}

.theme-onyx .process-icon,
body.theme-onyx .process-icon {
  background: rgba(171, 71, 188, 0.2) !important;
  color: #ce93d8 !important;
}

.theme-onyx .feature-item,
body.theme-onyx .feature-item {
  background: rgba(171, 71, 188, 0.1) !important;
  border-color: rgba(171, 71, 188, 0.2) !important;
}

.theme-onyx .process-cta,
body.theme-onyx .process-cta {
  background: linear-gradient(135deg, #ab47bc, #8e24aa) !important;
  color: white !important;
}

.theme-onyx .process-cta:hover,
body.theme-onyx .process-cta:hover {
  background: linear-gradient(135deg, #8e24aa, #7b1fa2) !important;
  transform: translateY(-2px) !important;
}

/* Onyx Theme - Card Colors Override */
.theme-onyx .health-card, 
body.theme-onyx .health-card {
  background: rgba(171, 71, 188, 0.2) !important;
  border-color: rgba(171, 71, 188, 0.3) !important;
  transition: all 0.3s ease !important;
}

.theme-onyx .finance-card,
body.theme-onyx .finance-card {
  background: rgba(255, 152, 0, 0.2) !important;
  border-color: rgba(255, 152, 0, 0.3) !important;
  transition: all 0.3s ease !important;
}

.theme-onyx .lifestyle-card,
body.theme-onyx .lifestyle-card {
  background: rgba(3, 169, 244, 0.2) !important;
  border-color: rgba(3, 169, 244, 0.3) !important;
  transition: all 0.3s ease !important;
}

.theme-onyx .health-icon,
body.theme-onyx .health-icon {
  color: #ce93d8 !important;
  transition: transform 0.3s ease !important;
}

.theme-onyx .finance-icon,
body.theme-onyx .finance-icon {
  color: #ffb74d !important;
  transition: transform 0.3s ease !important;
}

.theme-onyx .lifestyle-icon,
body.theme-onyx .lifestyle-icon {
  color: #81d4fa !important;
  transition: transform 0.3s ease !important;
}

/* Card hover effects */
.theme-onyx .health-card-link:hover .health-card,
body.theme-onyx .health-card-link:hover .health-card {
  background: rgba(171, 71, 188, 0.3) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

.theme-onyx .finance-card-link:hover .finance-card,
body.theme-onyx .finance-card-link:hover .finance-card {
  background: rgba(255, 152, 0, 0.3) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

.theme-onyx .lifestyle-card-link:hover .lifestyle-card,
body.theme-onyx .lifestyle-card-link:hover .lifestyle-card {
  background: rgba(3, 169, 244, 0.3) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Icon hover effects */
.theme-onyx .health-card-link:hover .health-icon,
body.theme-onyx .health-card-link:hover .health-icon,
.theme-onyx .finance-card-link:hover .finance-icon,
body.theme-onyx .finance-card-link:hover .finance-icon,
.theme-onyx .lifestyle-card-link:hover .lifestyle-icon,
body.theme-onyx .lifestyle-card-link:hover .lifestyle-icon {
  transform: scale(1.1) !important;
}

/* Button hover effects */
.theme-onyx .health-card-link:hover .cta-button,
body.theme-onyx .health-card-link:hover .cta-button {
  background-color: #9c27b0 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2) !important;
}

.theme-onyx .finance-card-link:hover .cta-button,
body.theme-onyx .finance-card-link:hover .cta-button {
  background-color: #ff9800 !important; /* Brighter orange */
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2) !important;
}

.theme-onyx .lifestyle-card-link:hover .cta-button,
body.theme-onyx .lifestyle-card-link:hover .cta-button {
  background-color: #03a9f4 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2) !important;
}

/* Hero section styling for onyx theme - DEEPER BLOOD PURPLE */
.theme-onyx .theme-hero,
body.theme-onyx .hero {
  background: linear-gradient(135deg, #4a0043 0%, #330030 100%) !important; /* Darker blood purple */
}

/* Ensure navbar gets the onyx styling */
.theme-onyx .navbar,
body.theme-onyx .navbar {
  background-color: #121212 !important;
  border-bottom: 1px solid #1a1a1a !important;
}

/* Brighter navigation links for onyx theme */
.theme-onyx .navbar-light .navbar-nav .nav-link,
body.theme-onyx .navbar-light .navbar-nav .nav-link {
  color: #e1bee7 !important; /* Light purple */
}

.theme-onyx .navbar-light .navbar-nav .nav-link:hover,
body.theme-onyx .navbar-light .navbar-nav .nav-link:hover {
  color: #f3e5f5 !important; /* Even lighter purple on hover */
}

/* Ensure navbar-light doesn't override our clean brand styling */
.theme-onyx .navbar-light .navbar-brand,
body.theme-onyx .navbar-light .navbar-brand {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* Improved card text colors for onyx theme - brighter text */
.theme-onyx .card-title,
body.theme-onyx .card-title {
  color: #ffffff !important;
  transition: color 0.3s ease !important;
}

.theme-onyx .card-text,
body.theme-onyx .card-text {
  color: #f0f0f0 !important; /* Even brighter text */
  transition: color 0.3s ease !important;
}

/* Health, Finance, Lifestyle card text styling */
.theme-onyx .health h2,
body.theme-onyx .health h2 {
  color: #ce93d8 !important; /* Match icon color */
  transition: color 0.3s ease !important;
}

.theme-onyx .finance h2,
body.theme-onyx .finance h2 {
  color: #ffb74d !important; /* Match icon color */
  transition: color 0.3s ease !important;
}

.theme-onyx .lifestyle h2,
body.theme-onyx .lifestyle h2 {
  color: #81d4fa !important; /* Match icon color */
  transition: color 0.3s ease !important;
}

/* Text hover effects - subtle color changes */
.theme-onyx .health-card-link:hover .card-title,
body.theme-onyx .health-card-link:hover .card-title,
.theme-onyx .health-card-link:hover h2,
body.theme-onyx .health-card-link:hover h2 {
  color: #e1bee7 !important; /* Lighter purple on hover */
}

.theme-onyx .finance-card-link:hover .card-title,
body.theme-onyx .finance-card-link:hover .card-title,
.theme-onyx .finance-card-link:hover h2,
body.theme-onyx .finance-card-link:hover h2 {
  color: #ffe0b2 !important; /* Lighter orange/gold on hover */
}

.theme-onyx .lifestyle-card-link:hover .card-title,
body.theme-onyx .lifestyle-card-link:hover .card-title,
.theme-onyx .lifestyle-card-link:hover h2,
body.theme-onyx .lifestyle-card-link:hover h2 {
  color: #b3e5fc !important; /* Lighter blue on hover */
}

/* Paragraph text hover effects */
.theme-onyx .health-card-link:hover .card-text,
body.theme-onyx .health-card-link:hover .card-text,
.theme-onyx .health-card-link:hover p,
body.theme-onyx .health-card-link:hover p {
  color: #f8f8f8 !important; /* Slightly brighter text */
}

.theme-onyx .finance-card-link:hover .card-text,
body.theme-onyx .finance-card-link:hover .card-text,
.theme-onyx .finance-card-link:hover p,
body.theme-onyx .finance-card-link:hover p {
  color: #f8f8f8 !important; /* Slightly brighter text */
}

.theme-onyx .lifestyle-card-link:hover .card-text,
body.theme-onyx .lifestyle-card-link:hover .card-text,
.theme-onyx .lifestyle-card-link:hover p,
body.theme-onyx .lifestyle-card-link:hover p {
  color: #f8f8f8 !important; /* Slightly brighter text */
}

/* Button styling for each card type */
.theme-onyx .health-card .cta-button,
body.theme-onyx .health-card .cta-button {
  background-color: rgba(156, 39, 176, 0.7) !important; /* Semi-transparent purple */
  color: white !important;
  transition: all 0.3s ease !important;
}

.theme-onyx .finance-card .cta-button,
body.theme-onyx .finance-card .cta-button {
  background-color: rgba(255, 152, 0, 0.7) !important; /* Semi-transparent orange */
  color: white !important;
  transition: all 0.3s ease !important;
}

.theme-onyx .lifestyle-card .cta-button,
body.theme-onyx .lifestyle-card .cta-button {
  background-color: rgba(3, 169, 244, 0.7) !important; /* Semi-transparent blue */
  color: white !important;
  transition: all 0.3s ease !important;
}

/* Onyx Theme - Use !important to override base styles */
:root .theme-onyx,
:root body.theme-onyx {
  --primary: #8e24aa !important; /* Cooler purple */
  --secondary: #424242 !important;
  --success: #00e676 !important;
  --info: #00b0ff !important;
  --warning: #ffab00 !important;
  --danger: #ff1744 !important;
  --light: #212121 !important;
  --dark: #121212 !important;
  
  --body-bg: #0a0a0a !important; /* Even darker than before */
  --text-color: #f5f5f5 !important;
  --link-color: #bb86fc !important; /* Cooler purple link color */
  --link-hover-color: #d1c4e9 !important;
  
  --navbar-bg: #121212 !important;
  --navbar-color: #f5f5f5 !important;
  --navbar-active: #bb86fc !important; /* Cooler purple */
  --navbar-hover-bg: #1a1a1a !important;
  
  --dropdown-bg: #1a1a1a !important;
  --dropdown-color: #f5f5f5 !important;
  --dropdown-hover-bg: #212121 !important;
  --dropdown-border-color: rgba(255,255,255,.05) !important;
  
  --card-bg: #1a1a1a !important;
  --card-border: rgba(255,255,255,.05) !important;
  --card-shadow: 0 .125rem .25rem rgba(0,0,0,.5) !important;
  
  --input-bg: #262626 !important;
  --input-border: #424242 !important;
  --input-color: #f5f5f5 !important;
  --input-focus-border: #8e24aa !important; /* Cooler purple */
  
  --btn-default-bg: #262626 !important;
  --btn-default-color: #f5f5f5 !important;
  --btn-default-border: #424242 !important;
  
  --footer-bg: #121212 !important;
  --footer-color: #9e9e9e !important;
  
  /* Health page specific variables */
  --health-card-bg: rgba(30, 30, 30, 0.9) !important;
  --health-card-border: rgba(187, 134, 252, 0.3) !important;
  --health-hover-bg: rgba(35, 35, 35, 0.95) !important;
  --health-text-primary: var(--onyx-accent-primary) !important;
  --health-text-secondary: var(--onyx-text-light) !important;
}

/* Override for footer transparency fix */
.theme-onyx footer,
body.theme-onyx footer {
  background: linear-gradient(to bottom, #131313 0%, #241c25 100%) !important;
  border-top: 1px solid #3b2a3f !important;
  color: #c2bcc6 !important;
}

.theme-onyx footer a,
body.theme-onyx footer a {
  color: var(--onyx-accent-secondary) !important;
  transition: color 0.3s ease !important;
}

.theme-onyx footer a:hover,
body.theme-onyx footer a:hover {
  color: var(--onyx-accent-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISSING HEALTH.HTML COMPONENTS - ONYX THEME
   ═══════════════════════════════════════════════════════════════════════════ */

/* Journey Overview Section */
.theme-onyx .journey-overview-section,
body.theme-onyx .journey-overview-section {
  background: rgba(26, 26, 26, 0.95) !important;
  border-color: rgba(187, 134, 252, 0.3) !important;
  color: var(--onyx-text-light) !important;
  border-radius: 1rem !important;
}

.theme-onyx .journey-overview-section h2,
body.theme-onyx .journey-overview-section h2 {
  color: var(--onyx-accent-primary) !important;
  text-shadow: 0 2px 4px rgba(187, 134, 252, 0.3) !important;
}

/* Score Showcase Section */
.theme-onyx .score-showcase,
body.theme-onyx .score-showcase {
  background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%) !important;
  border: 2px solid rgba(187, 134, 252, 0.4) !important;
  border-radius: 1rem !important;
}

.theme-onyx .score-showcase .metric-card,
body.theme-onyx .score-showcase .metric-card {
  background: rgba(30, 30, 30, 0.9) !important;
  border-color: rgba(187, 134, 252, 0.4) !important;
  color: var(--onyx-text-light) !important;
}

.theme-onyx .score-showcase .metric-card:hover,
body.theme-onyx .score-showcase .metric-card:hover {
  background: rgba(35, 35, 35, 0.95) !important;
  border-color: rgba(187, 134, 252, 0.6) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(187, 134, 252, 0.2) !important;
}

/* Quick Actions Section */
.theme-onyx .quick-actions,
body.theme-onyx .quick-actions {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
  border-top: 2px solid var(--onyx-accent-primary) !important;
}

.theme-onyx .quick-actions h2,
body.theme-onyx .quick-actions h2 {
  color: var(--onyx-text-light) !important;
  text-shadow: 0 2px 4px rgba(187, 134, 252, 0.4) !important;
}

.theme-onyx .quick-action-card,
body.theme-onyx .quick-action-card {
  background: rgba(30, 30, 30, 0.9) !important;
  border: 1px solid rgba(187, 134, 252, 0.3) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.3s ease !important;
}

.theme-onyx .quick-action-card h5,
body.theme-onyx .quick-action-card h5 {
  color: var(--onyx-accent-primary) !important;
  font-weight: 700 !important;
}

.theme-onyx .quick-action-card p,
body.theme-onyx .quick-action-card p {
  color: var(--onyx-text-muted) !important;
}

.theme-onyx .quick-action-card:hover,
body.theme-onyx .quick-action-card:hover {
  background: rgba(35, 35, 35, 0.95) !important;
  border-color: rgba(187, 134, 252, 0.5) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 25px rgba(187, 134, 252, 0.3) !important;
}

/* Form Controls Enhancement */
.theme-onyx .form-control,
body.theme-onyx .form-control {
  background-color: rgba(40, 40, 40, 0.9) !important;
  border-color: rgba(187, 134, 252, 0.3) !important;
  color: var(--onyx-text-light) !important;
}

.theme-onyx .form-control:focus,
body.theme-onyx .form-control:focus {
  background-color: rgba(45, 45, 45, 0.95) !important;
  border-color: var(--onyx-accent-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(187, 134, 252, 0.25) !important;
}

.theme-onyx .form-control::placeholder,
body.theme-onyx .form-control::placeholder {
  color: rgba(204, 204, 204, 0.6) !important;
}

/* Enhanced Button Styles */
.theme-onyx .btn-primary,
body.theme-onyx .btn-primary {
  background-color: var(--onyx-accent-primary) !important;
  border-color: var(--onyx-accent-primary) !important;
  color: black !important;
  font-weight: 600 !important;
}

.theme-onyx .btn-primary:hover,
body.theme-onyx .btn-primary:hover {
  background-color: #9b59b6 !important;
  border-color: #9b59b6 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(187, 134, 252, 0.4) !important;
}

.theme-onyx .btn-secondary,
body.theme-onyx .btn-secondary {
  background-color: var(--onyx-bg-secondary) !important;
  border-color: var(--onyx-bg-secondary) !important;
  color: var(--onyx-text-light) !important;
}

.theme-onyx .btn-secondary:hover,
body.theme-onyx .btn-secondary:hover {
  background-color: #2a2a2a !important;
  border-color: #2a2a2a !important;
  transform: translateY(-1px) !important;
}

/* Alert Components */
.theme-onyx .alert-success,
body.theme-onyx .alert-success {
  background-color: rgba(0, 230, 118, 0.15) !important;
  border-color: rgba(0, 230, 118, 0.3) !important;
  color: var(--onyx-accent-success) !important;
}

.theme-onyx .alert-warning,
body.theme-onyx .alert-warning {
  background-color: rgba(255, 183, 77, 0.15) !important;
  border-color: rgba(255, 183, 77, 0.3) !important;
  color: var(--onyx-accent-warning) !important;
}

.theme-onyx .alert-info,
body.theme-onyx .alert-info {
  background-color: rgba(206, 147, 216, 0.15) !important;
  border-color: rgba(206, 147, 216, 0.3) !important;
  color: var(--onyx-accent-secondary) !important;
}

.theme-onyx .alert-danger,
body.theme-onyx .alert-danger {
  background-color: rgba(244, 143, 177, 0.15) !important;
  border-color: rgba(244, 143, 177, 0.3) !important;
  color: var(--onyx-accent-danger) !important;
}

/* Table Styling */
.theme-onyx .table,
body.theme-onyx .table {
  color: var(--onyx-text-light) !important;
  background-color: transparent !important;
}

.theme-onyx .table th,
body.theme-onyx .table th {
  background-color: var(--onyx-bg-secondary) !important;
  border-color: rgba(187, 134, 252, 0.3) !important;
  color: var(--onyx-accent-primary) !important;
}

.theme-onyx .table td,
body.theme-onyx .table td {
  border-color: rgba(40, 40, 40, 0.5) !important;
}

.theme-onyx .table-hover tbody tr:hover,
body.theme-onyx .table-hover tbody tr:hover {
  background-color: rgba(187, 134, 252, 0.1) !important;
}

/* Modal Enhancements */
.theme-onyx .modal-content,
body.theme-onyx .modal-content {
  background-color: var(--onyx-bg-surface) !important;
  border: 2px solid rgba(187, 134, 252, 0.4) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
  border-radius: 1rem !important;
}

.theme-onyx .modal-header,
body.theme-onyx .modal-header {
  background-color: var(--onyx-bg-secondary) !important;
  border-bottom: 1px solid rgba(187, 134, 252, 0.3) !important;
  color: var(--onyx-text-light) !important;
  border-radius: 1rem 1rem 0 0 !important;
}

.theme-onyx .modal-title,
body.theme-onyx .modal-title {
  color: var(--onyx-accent-primary) !important;
}

.theme-onyx .btn-close,
body.theme-onyx .btn-close {
  filter: invert(1) !important;
}

/* Progress Bar Enhancements */
.theme-onyx .progress,
body.theme-onyx .progress {
  background-color: rgba(187, 134, 252, 0.2) !important;
  border-radius: 0.5rem !important;
}

.theme-onyx .progress-bar,
body.theme-onyx .progress-bar {
  background-color: var(--onyx-accent-primary) !important;
  border-radius: 0.5rem !important;
}

/* Enhanced Dropdown Styling */
.theme-onyx .dropdown-menu,
body.theme-onyx .dropdown-menu {
  background-color: var(--onyx-bg-surface) !important;
  border: 2px solid rgba(187, 134, 252, 0.3) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
  border-radius: 0.5rem !important;
}

.theme-onyx .dropdown-item,
body.theme-onyx .dropdown-item {
  color: var(--onyx-text-light) !important;
}

.theme-onyx .dropdown-item:hover,
body.theme-onyx .dropdown-item:hover {
  background-color: rgba(187, 134, 252, 0.1) !important;
  color: var(--onyx-accent-primary) !important;
}

.theme-onyx .dropdown-item.active,
body.theme-onyx .dropdown-item.active {
  background-color: var(--onyx-accent-primary) !important;
  color: #f5f5f5 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ONYX THEME BUTTON AND UI FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Button text fixes - ensure light text on dark buttons */
.theme-onyx .btn-primary,
.theme-onyx .btn-enhanced,
.theme-onyx .next-step-btn,
body.theme-onyx .btn-primary,
body.theme-onyx .btn-enhanced,
body.theme-onyx .next-step-btn {
  color: #f5f5f5 !important; /* Light text for better visibility */
}

.theme-onyx .btn-primary:hover,
.theme-onyx .btn-enhanced:hover,
.theme-onyx .next-step-btn:hover,
body.theme-onyx .btn-primary:hover,
body.theme-onyx .btn-enhanced:hover,
body.theme-onyx .next-step-btn:hover {
  color: #ffffff !important;
}

/* Dropdown items - brightened text */
.theme-onyx .dropdown-item,
.theme-onyx .height-unit,
body.theme-onyx .dropdown-item,
body.theme-onyx .height-unit {
  color: #f0f0f0 !important; /* Brightened for better visibility */
}

.theme-onyx .dropdown-item:hover,
.theme-onyx .height-unit:hover,
body.theme-onyx .dropdown-item:hover,
body.theme-onyx .height-unit:hover {
  background-color: rgba(187, 134, 252, 0.15) !important;
  color: #ffffff !important;
}

/* Theme dropdown button visibility */
.theme-onyx .btn-outline-secondary,
body.theme-onyx .btn-outline-secondary {
  border-color: #bb86fc !important;
  color: #bb86fc !important;
  background-color: rgba(20, 20, 20, 0.9) !important;
}

.theme-onyx .btn-outline-secondary:hover,
body.theme-onyx .btn-outline-secondary:hover {
  background-color: #bb86fc !important;
  border-color: #bb86fc !important;
  color: #ffffff !important;
}

/* Bell icon and other icons */
.theme-onyx .bi-bell,
body.theme-onyx .bi-bell {
  color: #cccccc !important;
}

.theme-onyx .bi-bell:hover,
body.theme-onyx .bi-bell:hover {
  color: #bb86fc !important; /* Light purple on hover, not black */
}

/* Icon hover colors - should be light purple, not black */
.theme-onyx .bi:hover,
.theme-onyx i:hover,
body.theme-onyx .bi:hover,
body.theme-onyx i:hover {
  color: #bb86fc !important; /* Light purple hover instead of black */
}

/* Fire icons and stats */
.theme-onyx .bi-fire,
body.theme-onyx .bi-fire {
  color: #ff6b35 !important; /* Bright orange fire */
}

.theme-onyx .stat-item strong,
body.theme-onyx .stat-item strong {
  color: #ffffff !important; /* Bright white numbers */
}

/* Text improvements */
.theme-onyx .text-muted,
body.theme-onyx .text-muted {
  color: #e9ecef !important; /* Much brighter than default */
}

.theme-onyx span,
body.theme-onyx span {
  color: #f8f9fa !important;
}

.theme-onyx small,
body.theme-onyx small {
  color: #e9ecef !important;
}

/* Points details section */
.theme-onyx .points-details-expanded.bg-light,
body.theme-onyx .points-details-expanded.bg-light {
  background-color: #2c3139 !important;
  color: #f8f9fa !important;
}

.theme-onyx .points-details-expanded h6,
body.theme-onyx .points-details-expanded h6 {
  color: #ffffff !important;
}

.theme-onyx .points-details-expanded .small.text-muted,
body.theme-onyx .points-details-expanded .small.text-muted {
  color: #e9ecef !important;
}

/* Premium and Beta badges */
.theme-onyx .premium-badge,
body.theme-onyx .premium-badge {
  background-color: #ffd700 !important;
  color: #000000 !important;
  position: relative;
  top: -3px !important;
  z-index: 15 !important;
}

.theme-onyx .beta-badge,
body.theme-onyx .beta-badge {
  background-color: #20c997 !important;
  color: #000000 !important;
  position: relative;
  top: -3px !important;
  z-index: 15 !important;
}
/* ──────────────────────────────────────────────
   ONYX - make theme-switcher solid / opaque
   ────────────────────────────────────────────── */

/* the palette button that lives in the nav-bar */
.theme-onyx .navbar .theme-switcher > .btn,
.theme-onyx .tm-topbar .theme-switcher > .btn {
  background-color:#1f1f1f !important;   /* solid charcoal */
  border-color:#bb86fc !important;       /* keep purple outline */
  color:#bb86fc !important;
  box-shadow:none !important;
}

/* give it a bright feedback on hover / open */
.theme-onyx .navbar .theme-switcher > .btn:hover,
.theme-onyx .navbar .theme-switcher > .btn:focus,
.theme-onyx .navbar .theme-switcher > .btn.show {
  background-color:#bb86fc !important;   /* solid purple */
  color:#0a0a0a !important;              /* dark text/icon */
}

/* dropdown panel itself: solid surface rather than 90% alpha */
.theme-onyx .theme-switcher-dropdown,
body.theme-onyx .theme-switcher-dropdown {
  background-color:#1a1a1a !important;   /* opaque surface */
}

/* keep each row readable on the darker panel */
.theme-onyx .theme-switcher-dropdown .dropdown-item {
  color:#f5f5f5 !important;
}
.theme-onyx .theme-switcher-dropdown .dropdown-item:hover {
  background-color:rgba(187,134,252,0.12) !important;
  color:#bb86fc !important;
}
/* ──────────────────────────────────────────────
   ONYX – solid dropdown dividers
   ────────────────────────────────────────────── */
   .theme-onyx .dropdown-menu .dropdown-divider {
    /* Bootstrap draws the line with border-top */
    border-top: 1px solid rgba(245,245,245,0.15) !important;   /* faint white */
    opacity: 1 !important;   /* disables any “fade” Bootstrap may apply */
  }

/* ═══════════════════════════════════════════════════════════════════════════
   PROCESS CARDS - ONYX THEME
   ═══════════════════════════════════════════════════════════════════════════ */

.theme-onyx .process-card,
body.theme-onyx .process-card {
  background: rgba(26, 26, 26, 0.95) !important;
  border-color: rgba(187, 134, 252, 0.3) !important;
  color: #f5f5f5 !important;
  transition: all 0.3s ease !important;
}

.theme-onyx .process-card:hover,
body.theme-onyx .process-card:hover {
  background: rgba(30, 30, 30, 0.98) !important;
  border-color: rgba(187, 134, 252, 0.6) !important;
  box-shadow: 0 8px 25px rgba(187, 134, 252, 0.2) !important;
  transform: translateY(-2px) !important;
}

.theme-onyx .process-number,
body.theme-onyx .process-number {
  background: linear-gradient(135deg, #bb86fc, #9c27b0) !important;
  color: black !important;
}

.theme-onyx .process-icon,
body.theme-onyx .process-icon {
  background: rgba(187, 134, 252, 0.2) !important;
  color: #ce93d8 !important;
}

.theme-onyx .process-cta,
body.theme-onyx .process-cta {
  background: linear-gradient(135deg, #bb86fc, #9c27b0) !important;
  color: black !important;
  transition: all 0.3s ease !important;
}

.theme-onyx .process-cta:hover,
body.theme-onyx .process-cta:hover {
  background: linear-gradient(135deg, #9c27b0, #7b1fa2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 15px rgba(187, 134, 252, 0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURE ITEMS - ONYX THEME
   ═══════════════════════════════════════════════════════════════════════════ */

.theme-onyx .feature-item,
body.theme-onyx .feature-item {
  background: rgba(187, 134, 252, 0.1) !important;
  border-color: rgba(187, 134, 252, 0.2) !important;
  color: #f5f5f5 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEAL PLANNING COMPONENTS - ONYX THEME
   ═══════════════════════════════════════════════════════════════════════════ */

.theme-onyx .meal-selector {
  background-color: #1a1a1a !important;
  color: #f5f5f5 !important;
}

.theme-onyx .meal-selector label {
  color: #f5f5f5 !important;
}

.theme-onyx .card-header.bg-light {
  background-color: #262626 !important;
  color: #f5f5f5 !important;
  border-color: #333333 !important;
}

.theme-onyx .empty-meal,
.theme-onyx .empty-meal .card-body {
  background-color: #1a1a1a !important;
  color: #f5f5f5 !important;
}

.theme-onyx .empty-meal .text-muted,
.theme-onyx .empty-meal-content p {
  color: #aaa !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUICK ACTIONS - ONYX THEME
   ═══════════════════════════════════════════════════════════════════════════ */

.theme-onyx .quick-actions,
body.theme-onyx .quick-actions {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
  border-top: 2px solid var(--onyx-accent-primary) !important;
}

.theme-onyx .quick-actions h2,
body.theme-onyx .quick-actions h2 {
  color: var(--onyx-text-light) !important;
  text-shadow: 0 2px 4px rgba(187, 134, 252, 0.4) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
}

.theme-onyx .quick-action-card,
body.theme-onyx .quick-action-card {
  background: rgba(30, 30, 30, 0.9) !important;
  border: 1px solid rgba(187, 134, 252, 0.3) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.3s ease !important;
}

.theme-onyx .quick-action-card h5,
body.theme-onyx .quick-action-card h5 {
  color: var(--onyx-accent-primary) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}

.theme-onyx .quick-action-card p,
body.theme-onyx .quick-action-card p {
  color: var(--onyx-text-muted) !important;
  font-weight: 500 !important;
}

.theme-onyx .quick-action-card:hover,
body.theme-onyx .quick-action-card:hover {
  background: rgba(35, 35, 35, 0.95) !important;
  border-color: rgba(187, 134, 252, 0.5) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 25px rgba(187, 134, 252, 0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCORE SHOWCASE - ONYX THEME
   ═══════════════════════════════════════════════════════════════════════════ */

.theme-onyx .score-showcase,
body.theme-onyx .score-showcase {
  background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%) !important;
  border: 2px solid rgba(187, 134, 252, 0.4) !important;
  border-radius: 1rem !important;
}

.theme-onyx .score-showcase .metric-card,
body.theme-onyx .score-showcase .metric-card {
  background: rgba(30, 30, 30, 0.9) !important;
  border-color: rgba(187, 134, 252, 0.4) !important;
  color: var(--onyx-text-light) !important;
  transition: all 0.3s ease !important;
}

.theme-onyx .score-showcase .metric-card:hover,
body.theme-onyx .score-showcase .metric-card:hover {
  background: rgba(35, 35, 35, 0.95) !important;
  border-color: rgba(187, 134, 252, 0.6) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(187, 134, 252, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   JOURNEY OVERVIEW - ONYX THEME
   ═══════════════════════════════════════════════════════════════════════════ */

.theme-onyx .journey-overview-section,
body.theme-onyx .journey-overview-section {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border: 2px solid rgba(187, 134, 252, 0.3) !important;
  color: var(--onyx-text-light) !important;
  border-radius: 1rem !important;
}

.theme-onyx .journey-overview-section h2,
body.theme-onyx .journey-overview-section h2 {
  color: var(--onyx-accent-primary) !important;
  text-shadow: 0 2px 4px rgba(187, 134, 252, 0.3) !important;
}

.theme-onyx .journey-overview-section p,
body.theme-onyx .journey-overview-section p {
  color: rgba(245, 245, 245, 0.9) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME CHOOSER DROPDOWN - ONYX THEME
   ═══════════════════════════════════════════════════════════════════════════ */

.theme-onyx .dropdown-item.theme-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  border-radius: 4px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #f5f5f5 !important;
  padding: 0.35rem 0.75rem;
}

.theme-onyx .theme-option .theme-color-preview {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.theme-onyx .dropdown-item.theme-option:hover {
  background: rgba(187, 134, 252, 0.08) !important;
  color: #f5f5f5 !important;
}

/* Text colors based on theme preview */
.theme-onyx .theme-option[data-theme="dark"],
.theme-onyx .theme-option[data-theme="onyx"],
.theme-onyx .theme-option[data-theme="midnight"] {
  color: #f5f5f5 !important;
}

.theme-onyx .theme-option[data-theme="light"],
.theme-onyx .theme-option[data-theme="nature"],
.theme-onyx .theme-option[data-theme="sunrise"] {
  color: #e5e5e5 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   POINTS DETAILS - ONYX THEME
   ═══════════════════════════════════════════════════════════════════════════ */

.theme-onyx .points-details-expanded,
body.theme-onyx .points-details-expanded {
  background: linear-gradient(135deg, #1a1a1a 0%, #262626 100%) !important;
  border-top: 2px solid #333333 !important;
  color: #f5f5f5 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESS STATS BAR & POINTS DETAILS - ONYX THEME FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Enhanced points details button for onyx theme */
.theme-onyx .points-details-btn,
body.theme-onyx .points-details-btn {
  background: linear-gradient(135deg, var(--onyx-accent-primary), var(--onyx-accent-secondary)) !important;
  color: black !important;
  border: 2px solid rgba(187, 134, 252, 0.3) !important;
  text-shadow: none !important;
}

.theme-onyx .points-details-btn:hover,
body.theme-onyx .points-details-btn:hover {
  background: linear-gradient(135deg, var(--onyx-accent-secondary), #9c27b0) !important;
  color: black !important;
  border-color: rgba(187, 134, 252, 0.5) !important;
  box-shadow: 0 4px 15px rgba(187, 134, 252, 0.4) !important;
}

.theme-onyx .points-details-btn i,
body.theme-onyx .points-details-btn i {
  color: black !important;
  text-shadow: none !important;
}

/* Fix all icons in progress stats for onyx */
.theme-onyx .stat-item .bi-graph-up,
body.theme-onyx .stat-item .bi-graph-up,
.theme-onyx .points-details-btn .bi-graph-up,
body.theme-onyx .points-details-btn .bi-graph-up {
  color: var(--onyx-text-light) !important;
  background-color: transparent !important;
  opacity: 1 !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GETTING STARTED SECTION - ONYX THEME
   ═══════════════════════════════════════════════════════════════════════════ */

.theme-onyx .getting-started-section,
body.theme-onyx .getting-started-section {
  background: var(--onyx-bg-surface) !important;
}

.theme-onyx .getting-started-card,
body.theme-onyx .getting-started-card {
  background: rgba(26, 26, 26, 0.95) !important;
  border: 1px solid rgba(187, 134, 252, 0.3) !important;
  color: var(--onyx-text-light) !important;
}

.theme-onyx .getting-started-card h3,
body.theme-onyx .getting-started-card h3 {
  color: var(--onyx-accent-primary) !important;
}

.theme-onyx .getting-started-card #dismissGettingStarted:hover,
body.theme-onyx .getting-started-card #dismissGettingStarted:hover {
  transform: scale(1.05) !important;
}
/* ──────────────────────────────────────────────
   GOAL-ADVISOR CARDS – ONYX THEME
   ────────────────────────────────────────────── */

/* 1) Outer card shell (works for both Calories & Diet boxes) */
.theme-onyx .result-card,
body.theme-onyx .result-card {
  background: var(--onyx-bg-surface);          /* deep charcoal */
  border: 1px solid rgba(187, 134, 252, 0.25); /* faint purple outline */
  border-radius: 0.75rem;
  padding: 1.5rem 1.75rem;
  text-align: center;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.theme-onyx .result-card:hover,
body.theme-onyx .result-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(187, 134, 252, 0.22);
}

/* 2) Default “result-value” pill (visible only when *not* inside .result-card) */
.theme-onyx .result-value,
body.theme-onyx .result-value {
  display: inline-block;
  padding: 1.25rem 2rem;
  border-radius: 0.75rem;

  background: rgba(20, 20, 20, 0.95);          /* dark mini-card */
  border: 1px solid rgba(187, 134, 252, 0.35); /* subtle accent edge */
  color: var(--onyx-accent-primary);

  font-size: 3rem;
  font-weight: 700;
  line-height: 1;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.theme-onyx .result-value:hover,
body.theme-onyx .result-value:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(187, 134, 252, 0.25);
}

/* 3) Override when the value lives *inside* .result-card → remove inner pill */
.theme-onyx .result-card .result-value,
body.theme-onyx .result-card .result-value {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;

  font-size: 2.25rem;         /* slightly smaller headline */
}

/* 4) Tiny label under the value */
.theme-onyx .result-card .result-label,
body.theme-onyx .result-card .result-label {
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--onyx-text-muted);
}
/* ──────────────────────────────────────────────
   FORM FIELDS – ONYX THEME
   ────────────────────────────────────────────── */
   .theme-onyx .form-control,
   body.theme-onyx .form-control {
     background: var(--onyx-bg-secondary);   /* dark charcoal */
     color: var(--onyx-text-light);          /* readable on dark */
     border: 1px solid rgba(255, 255, 255, 0.08);
   }
   
   .theme-onyx .form-control::placeholder,
   body.theme-onyx .form-control::placeholder {
     color: var(--onyx-text-muted);          /* muted hint text */
     opacity: 0.75;
   }
   
   .theme-onyx .form-control:focus,
   body.theme-onyx .form-control:focus {
     border-color: var(--onyx-accent-primary);
     box-shadow: 0 0 0 0.15rem rgba(187, 134, 252, 0.25);
     background: var(--onyx-bg-secondary);
     color-scheme: dark;                     /* ensures correct browser UI */
   }
   
   /* invalid state */
   .theme-onyx .form-control.is-invalid,
   body.theme-onyx .form-control.is-invalid {
     border-color: #dc3545;                  /* keep Bootstrap red */
     background: rgba(220, 53, 69, 0.08);    /* faint red overlay */
     color: var(--onyx-text-light);
   }
/* ═════════════════════════════════════════════
   FORM-SELECT – ONYX THEME
   ═════════════════════════════════════════════ */
   .theme-onyx .form-select,
   body.theme-onyx .form-select {
     background: var(--onyx-bg-secondary);            /* dark background  */
     color: var(--onyx-text-light);                   /* light text       */
     border: 1px solid rgba(255, 255, 255, 0.08);
   }
   
   .theme-onyx .form-select:focus,
   body.theme-onyx .form-select:focus {
     border-color: var(--onyx-accent-primary);
     box-shadow: 0 0 0 0.15rem rgba(187, 134, 252, 0.25);
     background: var(--onyx-bg-secondary);
     color-scheme: dark;                              /* keeps native arrow light */
   }
   
   /* invalid state */
   .theme-onyx .form-select.is-invalid,
   body.theme-onyx .form-select.is-invalid {
     border-color: #dc3545;
     background: rgba(220, 53, 69, 0.08);
     color: var(--onyx-text-light);
   }
   /* Dropdown list items (works in Chromium browsers) */
.theme-onyx .form-select option,
.theme-onyx .form-select optgroup {
  background: var(--onyx-bg-secondary);
  color: var(--onyx-text-light);
}
/* ──────────────────────────────────────────────
   “Did You Know?” / Info Cards – ONYX THEME
   ────────────────────────────────────────────── */
   .theme-onyx .info-card,
   body.theme-onyx .info-card {
     background: var(--onyx-bg-surface);          /* deep charcoal */
     border: 1px solid rgba(187, 134, 252, .25);  /* faint purple edge */
     border-radius: .75rem;
     box-shadow: 0 6px 18px rgba(0,0,0,.55);
     transition: transform .25s ease, box-shadow .25s ease;
   }
   
   .theme-onyx .info-card:hover,
   body.theme-onyx .info-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 10px 28px rgba(187,134,252,.22);
   }
   
   /* title & text */
   .theme-onyx .info-card .card-title   { color: var(--onyx-accent-primary); font-weight: 600; }
   .theme-onyx .info-card .card-text    { color: var(--onyx-text-light);     }
   
   /* button */
   .theme-onyx .info-card .btn-enhanced {
     background: var(--onyx-accent-primary);
     border-color: var(--onyx-accent-primary);
     color: #0a0a0a;                       /* readable on purple */
     font-weight: 600;
   }
   .theme-onyx .info-card .btn-enhanced:hover {
     background: #a679f2;                  /* lighter violet */
     border-color: #a679f2;
   }

/* ──────────────────────────────────────────────
   TEMP: hide site-wide search buttons
   ────────────────────────────────────────────── */
#search-toggle,
#mobile-search {
  display: none !important;
}

/* ──────────────────────────────────────────────
   FITNESS PLAN BUILDER - ONYX THEME
   ────────────────────────────────────────────── */
   
/* Hero section with onyx purple gradient */
.theme-onyx .fitness-hero,
body.theme-onyx .fitness-hero {
  background: linear-gradient(135deg, var(--onyx-accent-primary) 0%, var(--onyx-accent-secondary) 100%) !important;
  color: var(--onyx-text-light) !important;
  opacity: 1 !important;
}

.theme-onyx .fitness-hero h1,
body.theme-onyx .fitness-hero h1,
.theme-onyx .fitness-hero p,
body.theme-onyx .fitness-hero p {
  color: var(--onyx-text-light) !important;
  opacity: 1 !important;
}

/* Hero info cards with glass effect */
.theme-onyx .hero-info-card,
body.theme-onyx .hero-info-card {
  background: rgba(20, 20, 20, 0.6) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(187, 134, 252, 0.3) !important;
  color: var(--onyx-text-light) !important;
  opacity: 1 !important;
}

.theme-onyx .hero-info-card:hover,
body.theme-onyx .hero-info-card:hover {
  background: rgba(187, 134, 252, 0.15) !important;
  border-color: rgba(187, 134, 252, 0.5) !important;
}

.theme-onyx .hero-info-card span,
body.theme-onyx .hero-info-card span {
  color: var(--onyx-text-light) !important;
  font-weight: 600;
  opacity: 1 !important;
}

.theme-onyx .hero-info-card i,
body.theme-onyx .hero-info-card i {
  color: var(--onyx-accent-primary) !important;
  opacity: 0.9 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DIARY TRUEMETRICS OVERVIEW SECTION - ONYX THEME
   ═══════════════════════════════════════════════════════════════════════════ */

/* Main overview section */
.theme-onyx .diary-truemetrics-overview,
body.theme-onyx .diary-truemetrics-overview {
  background: var(--onyx-bg-secondary) !important;
  border-top: 1px solid rgba(187, 134, 252, 0.3) !important;
  padding: 2rem 0 !important;
}

/* Section headers */
.theme-onyx .diary-truemetrics-overview h5,
body.theme-onyx .diary-truemetrics-overview h5 {
  color: var(--onyx-accent-primary) !important;
  font-weight: 600 !important;
}

.theme-onyx .diary-truemetrics-overview .text-muted,
body.theme-onyx .diary-truemetrics-overview .text-muted {
  color: var(--onyx-text-muted) !important;
}

/* Stat cards */
.theme-onyx .diary-truemetrics-overview .stat-card,
body.theme-onyx .diary-truemetrics-overview .stat-card {
  background: rgba(30, 30, 30, 0.9) !important;
  border: 1px solid rgba(187, 134, 252, 0.3) !important;
  border-radius: 0.75rem !important;
  padding: 1.5rem !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.theme-onyx .diary-truemetrics-overview .stat-card:hover,
body.theme-onyx .diary-truemetrics-overview .stat-card:hover {
  background: rgba(35, 35, 35, 0.95) !important;
  border-color: rgba(187, 134, 252, 0.5) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(187, 134, 252, 0.2) !important;
}

/* Stat card links */
.theme-onyx .diary-truemetrics-overview .stat-card-link,
body.theme-onyx .diary-truemetrics-overview .stat-card-link {
  text-decoration: none !important;
}

/* Stat icons */
.theme-onyx .diary-truemetrics-overview .stat-icon,
body.theme-onyx .diary-truemetrics-overview .stat-icon {
  background: rgba(187, 134, 252, 0.15) !important;
  color: var(--onyx-accent-primary) !important;
  width: 3.5rem !important;
  height: 3.5rem !important;
  border-radius: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
  margin-bottom: 1rem !important;
}

/* Different colors for different stat icons */
.theme-onyx .diary-truemetrics-overview .stat-icon[style*="background: rgba(40, 167, 69"],
body.theme-onyx .diary-truemetrics-overview .stat-icon[style*="background: rgba(40, 167, 69"] {
  background: rgba(0, 230, 118, 0.15) !important;
  color: var(--onyx-accent-success) !important;
}

.theme-onyx .diary-truemetrics-overview .stat-icon[style*="background: rgba(78, 147, 232"],
body.theme-onyx .diary-truemetrics-overview .stat-icon[style*="background: rgba(78, 147, 232"] {
  background: rgba(187, 134, 252, 0.15) !important;
  color: var(--onyx-accent-primary) !important;
}

.theme-onyx .diary-truemetrics-overview .stat-icon[style*="background: rgba(245, 158, 11"],
body.theme-onyx .diary-truemetrics-overview .stat-icon[style*="background: rgba(245, 158, 11"] {
  background: rgba(255, 183, 77, 0.15) !important;
  color: var(--onyx-accent-warning) !important;
}

.theme-onyx .diary-truemetrics-overview .stat-icon[style*="background: rgba(14, 165, 233"],
body.theme-onyx .diary-truemetrics-overview .stat-icon[style*="background: rgba(14, 165, 233"] {
  background: rgba(206, 147, 216, 0.15) !important;
  color: var(--onyx-accent-secondary) !important;
}

/* Stat numbers and labels */
.theme-onyx .diary-truemetrics-overview .stat-number,
body.theme-onyx .diary-truemetrics-overview .stat-number {
  color: var(--onyx-text-light) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
}

.theme-onyx .diary-truemetrics-overview .stat-label,
body.theme-onyx .diary-truemetrics-overview .stat-label {
  color: var(--onyx-text-muted) !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Metric value standalone */
.theme-onyx .metric-value,
body.theme-onyx .metric-value {
  color: var(--onyx-accent-primary) !important;
  font-weight: 600 !important;
}