body {
  background-color: #f8fafc;
  background-image: 
    radial-gradient(at 0% 0%, hsla(210, 40%, 96%, 1) 0, transparent 50%), 
    radial-gradient(at 50% 0%, hsla(165, 60%, 94%, 0.4) 0, transparent 50%),
    radial-gradient(at 100% 0%, hsla(220, 30%, 94%, 1) 0, transparent 50%);
  background-attachment: fixed;
  transition: background-color 0.3s ease, background-image 0.3s ease;
}

html.dark body {
  background-color: #0b0f19;
  background-image: 
    radial-gradient(at 0% 0%, hsla(253, 16%, 7%, 1) 0, transparent 50%),
    radial-gradient(at 50% 0%, hsla(165, 80%, 15%, 0.15) 0, transparent 50%),
    radial-gradient(at 100% 0%, hsla(240, 20%, 10%, 1) 0, transparent 50%);
}

/* Premium Glassmorphic scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.05);
}

html.dark ::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.3);
}

::-webkit-scrollbar-thumb {
  background: rgba(1, 176, 130, 0.2);
  border-radius: 4px;
}

html.dark ::-webkit-scrollbar-thumb {
  background: rgba(1, 176, 130, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(1, 176, 130, 0.5);
}
/* Red Flashing animation classes */
.flash-active-red {
  animation: flashRed 0.8s ease-in-out infinite alternate;
  border-color: rgba(239, 68, 68, 0.8) !important;
}

/* Active preset buttons hover overrides to prevent white-on-light-gray in light mode */
.time-preset-btn.bg-brand-600:hover,
.pace-preset-btn.bg-brand-600:hover {
  background-color: #018864 !important; /* brand-700 (darker green) */
  color: #ffffff !important;
  border-color: #007354 !important; /* brand-800 */
}

/* Print Stylesheet for PDF Generation */
@media print {
  html, body, html.dark body {
    background: #ffffff !important;
    background-image: none !important;
    color: #0f172a !important;
  }

  /* Force light colors on dark elements */
  .dark *, * {
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Keep green & red colors for statistics and graph bars */
  .text-brand-600, .dark .text-brand-400, .text-brand-500 {
    color: #018864 !important;
  }
  .text-emerald-500, .dark .text-emerald-400 {
    color: #10b981 !important;
  }
  .text-rose-500, .dark .text-rose-400 {
    color: #f43f5e !important;
  }

  /* Reset main container and center card */
  main {
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
  }

  #review-screen {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #review-screen > div {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Ensure graph bars have visual background colors and correct layout when printed */
  #review-graph-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    height: 96px !important;
  }

  #review-graph-container > div {
    flex: 1 1 auto !important;
    min-width: 12px !important;
    max-width: 28px !important;
  }

  #review-graph-container div {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  #review-graph-container .bg-emerald-500\/80,
  #review-graph-container .bg-emerald-500 {
    background-color: #10b981 !important;
  }

  #review-graph-container .bg-rose-500\/80,
  #review-graph-container .bg-rose-500 {
    background-color: #f43f5e !important;
  }

  /* Hide elements designated as print:hidden */
  .print\:hidden {
    display: none !important;
  }
}

/* Desktop Sidebar Grid Layouts & Width States */
@media (min-width: 1024px) {
  .lg-grid-cols-custom {
    /* 2 columns on lg screens: Main area + Sidebar (Banner hidden) */
    grid-template-columns: 1fr auto !important;
  }

  .sidebar-expanded {
    width: 300px !important;
  }

  .sidebar-collapsed {
    width: 48px !important;
  }
}

@media (min-width: 1280px) {
  .lg-grid-cols-custom {
    /* 3 columns on xl screens: Main area + Sidebar + Banner */
    grid-template-columns: 1fr auto auto !important;
  }
}

.sidebar-transition {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: width;
}

.content-transition {
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out !important;
}

/* Sidebar card padding states */
.partner-card-expanded {
  padding: 16px !important; /* Mobile padding */
}

@media (min-width: 1024px) {
  .partner-card-expanded {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    padding-left: 20px !important;
    padding-right: 48px !important; /* Reduced right padding from 56px to 48px for a tighter layout */
  }
}

.partner-card-collapsed {
  padding: 20px !important;
}

@media (min-width: 1024px) {
  .partner-card-collapsed {
    padding: 0 !important;
  }
}