/* Custom styles beyond Tailwind */
html {
  scroll-behavior: smooth;
}

/* Tooltip styles */
#tooltip {
  pointer-events: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.tooltip-arrow,
.tooltip-arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}
.tooltip-arrow {
  visibility: hidden;
}
.tooltip-arrow::before {
  visibility: visible;
  content: '';
  transform: rotate(45deg);
}
#tooltip[data-popper-placement^='top'] > .tooltip-arrow {
  bottom: -4px;
}
#tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
  top: -4px;
}
#tooltip[data-popper-placement^='left'] > .tooltip-arrow {
  right: -4px;
}
#tooltip[data-popper-placement^='right'] > .tooltip-arrow {
  left: -4px;
}


/* Term tooltip */
.term-tooltip {
  border-bottom: 1px dotted rgba(99, 102, 241, 0.7); /* Indigo dotted line */
  cursor: help;
  position: relative;
}
.dark .term-tooltip {
  border-bottom: 1px dotted rgba(129, 140, 248, 0.7); /* Lighter Indigo for dark mode */
}


/* Loading placeholders */
.loading-placeholder {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .6;
  }
}

/* Flow diagram interactions */
.flow-step {
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.flow-step rect {
 transition: fill 0.25s ease, stroke 0.25s ease, transform 0.2s ease; /* Added transform */
}
.flow-step text {
 transition: fill 0.25s ease, font-weight 0.2s ease; /* Added font-weight */
}

.flow-step:hover rect {
  filter: brightness(1.05); /* Tailwind uses filter for brightness */
  transform: scale(1.02);
}
.flow-step:hover text {
  font-weight: 600; /* semibold */
}

.flow-step.active rect {
  @apply fill-indigo-600 dark:fill-indigo-500 stroke-indigo-700 dark:stroke-indigo-400;
  filter: brightness(1.1);
  transform: scale(1.03);
}
.flow-step.active text {
  @apply fill-white dark:fill-gray-100;
  font-weight: bold;
}

/* Accordion transitions */
.accordion-header svg {
  transition: transform 0.3s ease-in-out;
}

.accordion-header.active svg {
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, padding 0.4s ease-out;
  padding-top: 0;
  padding-bottom: 0;
}

.accordion-content.visible {
  max-height: 20000px; /* Increased large enough to contain any content */
  transition: max-height 0.6s ease-in, padding 0.6s ease-in;
  padding-top: 1rem; /* Match p-4 */
  padding-bottom: 1rem; /* Match p-4 */
}

/* Table highlighting for comparison */
.better-value {
  font-weight: 600;
  @apply bg-green-50 dark:bg-green-800/30 text-green-700 dark:text-green-300;
}

.worse-value {
  @apply bg-red-50 dark:bg-red-800/30 text-red-700 dark:text-red-400;
}

.neutral-value {
   /* No special styling or subtle gray if needed */
}

/* RSP Domain tabs */
.rsp-domain-tab.active {
  @apply border-indigo-500 text-indigo-600 dark:border-indigo-400 dark:text-indigo-400;
}

.rsp-domain-tab:not(.active) {
  @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-500;
}

/* Chart filter buttons */
.chart-filter-button {
    @apply px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500;
}
.chart-filter-button.active {
    @apply bg-indigo-500 text-white dark:bg-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-500 border-indigo-500 dark:border-indigo-600;
}


/* Canvas responsiveness */
canvas {
  max-width: 100%;
  height: auto !important; /* Override chart.js inline style */
}

/* Prose customisations for markdown content */
.prose {
    @apply text-gray-700 dark:text-gray-300;
}
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    @apply text-gray-900 dark:text-gray-100;
}
.prose a {
    @apply text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300;
}
.prose strong {
    @apply text-gray-800 dark:text-gray-200;
}
.prose blockquote {
    @apply border-l-4 border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400;
}
.prose code {
  @apply text-sm px-1 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-indigo-700 dark:text-indigo-400;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.prose pre {
  @apply bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-700 rounded-md shadow;
  padding: 1rem;
  overflow-x: auto;
}
.prose pre code {
  background-color: transparent !important;
  padding: 0;
  border: none;
  color: inherit; /* Make sure preformatted code inherits color */
}
.prose ul > li::before {
    @apply bg-gray-400 dark:bg-gray-500;
}
.prose table { @apply w-full my-4 text-sm; }
.prose th { @apply p-2 border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 font-semibold text-left; }
.prose td { @apply p-2 border border-gray-300 dark:border-gray-600; }


/* Navigation active link */
.nav-link.active {
    @apply border-indigo-500 text-indigo-600 dark:border-indigo-400 dark:text-indigo-300;
}
#mobile-menu .nav-link.active {
    @apply bg-indigo-50 border-indigo-500 text-indigo-700 dark:bg-indigo-900/30 dark:border-indigo-400 dark:text-indigo-300;
}

/* Dark mode specific for elements not covered by prose or tailwind dark variants */
.dark .bg-white { @apply bg-gray-800; }
.dark .bg-gray-50 { @apply bg-gray-900; } 
.dark .bg-gray-100 { @apply bg-gray-700; }

.dark .text-gray-900 { @apply text-gray-100; }
.dark .text-gray-800 { @apply text-gray-200; }
.dark .text-gray-700 { @apply text-gray-300; }
.dark .text-gray-600 { @apply text-gray-400; }
.dark .text-gray-500 { @apply text-gray-400; } 

.dark .border-gray-200 { @apply border-gray-700; }
.dark .border-gray-300 { @apply border-gray-600; }

.dark .shadow-lg { @apply shadow-lg shadow-gray-950/50; }
.dark .shadow-xl { @apply shadow-xl shadow-gray-950/50; }
.dark .shadow { @apply shadow shadow-gray-950/50; }
.dark .shadow-md { @apply shadow-md shadow-gray-950/50; }
.dark .shadow-sm { @apply shadow-sm shadow-gray-950/50; }


/* Scrollbar for dark mode - Webkit only for now */
.dark ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
.dark ::-webkit-scrollbar-track {
    background: #111827; /* gray-900 */
}
.dark ::-webkit-scrollbar-thumb {
    background-color: #374151; /* gray-700 */
    border-radius: 6px;
    border: 3px solid #111827; /* gray-900 */
}
.dark ::-webkit-scrollbar-thumb:hover {
    background-color: #4b5563; /* gray-600 */
}

/* General scrollbar style - Webkit only */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: #f3f4f6; /* gray-100 */
}
::-webkit-scrollbar-thumb {
    background-color: #d1d5db; /* gray-300 */
    border-radius: 6px;
    border: 3px solid #f3f4f6; /* gray-100 */
}
::-webkit-scrollbar-thumb:hover {
    background-color: #9ca3af; /* gray-400 */
}


/* Section title underline */
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    @apply bg-indigo-500 dark:bg-indigo-400;
    margin-top: 0.5rem;
}