1  /* SPDX-FileCopyrightText: 2022-present deepset GmbH <info@deepset.ai>
  2   *
  3   * SPDX-License-Identifier: Apache-2.0
  4   */
  5  
  6  /* Import Inter font from Google Fonts */
  7  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
  8  
  9  :root {
 10    /* Primary Color Scale (Blue) - Light Mode */
 11    --ifm-color-primary: #2558FF;
 12    --ifm-color-primary-dark: #1F49D4;
 13    --ifm-color-primary-darker: #193BAA;
 14    --ifm-color-primary-darkest: #132C80;
 15    --ifm-color-primary-light: #4974FF;
 16    --ifm-color-primary-lighter: #6E90FF;
 17    --ifm-color-primary-lightest: #92ABFF;
 18  
 19    /* Secondary Color Scale (Blue Tints) - Light Mode */
 20    --ifm-color-secondary: #B6C7FF;
 21    --ifm-color-secondary-dark: #92ABFF;
 22    --ifm-color-secondary-darker: #6E90FF;
 23    --ifm-color-secondary-darkest: #4974FF;
 24    --ifm-color-secondary-light: #D3DEFF;
 25    --ifm-color-secondary-lighter: #E6ECFF;
 26    --ifm-color-secondary-lightest: #F0F4FF;
 27  
 28    /* Brand Colors for Reference */
 29    --haystack-blue-main: #2558FF;
 30    --haystack-blue-soft: #B6C7FF;
 31    --haystack-blue-medium: #6E90FF;
 32    --haystack-blue-strong: #193BAA;
 33    --haystack-blue-light: #E6ECFF;
 34  
 35    /* Code and Typography */
 36    --ifm-code-font-size: 95%;
 37    --docusaurus-highlighted-code-line-bg: rgba(37, 88, 255, 0.12);
 38    --ifm-font-family-base:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 39    --ifm-font-family-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 40  
 41    /* Admonition Custom Colors */
 42    --docusaurus-admonition-tip-bg: rgba(37, 88, 255, 0.08);
 43    --docusaurus-admonition-tip-border: var(--ifm-color-primary);
 44    --docusaurus-admonition-note-bg: rgba(182, 199, 255, 0.15);
 45    --docusaurus-admonition-note-border: #6E90FF;
 46    --docusaurus-admonition-info-bg: rgba(110, 144, 255, 0.1);
 47    --docusaurus-admonition-info-border: #92ABFF;
 48  
 49    /* Content Width - wider for long class names */
 50    --ifm-container-width: 1024px;
 51  
 52    /* Neutral Colors for UI Components */
 53    --color-background: #ffffff;
 54    --color-background-hover: #f5f7fa;
 55    --color-border: #e0e0e0;
 56    --color-border-hover: #d0d0d0;
 57    --color-text-primary: #333333;
 58    --color-text-secondary: #666666;
 59    --color-shadow: rgba(0, 0, 0, 0.12);
 60  
 61    /* Success Colors */
 62    --color-success-bg: #e6f4ea;
 63    --color-success-border: #b7dfc7;
 64    --color-success-text: #155724;
 65  }
 66  
 67  /* For readability concerns, you should choose a lighter palette in dark mode. */
 68  [data-theme='dark'] {
 69    /* Primary Color Scale (Blue) - Dark Mode */
 70    --ifm-color-primary: #6E90FF;
 71    --ifm-color-primary-dark: #4974FF;
 72    --ifm-color-primary-darker: #2558FF;
 73    --ifm-color-primary-darkest: #1F49D4;
 74    --ifm-color-primary-light: #92ABFF;
 75    --ifm-color-primary-lighter: #B6C7FF;
 76    --ifm-color-primary-lightest: #D3DEFF;
 77  
 78    /* Secondary Color Scale (Blue Tints) - Dark Mode */
 79    --ifm-color-secondary: #92ABFF;
 80    --ifm-color-secondary-dark: #6E90FF;
 81    --ifm-color-secondary-darker: #4974FF;
 82    --ifm-color-secondary-darkest: #2558FF;
 83    --ifm-color-secondary-light: #B6C7FF;
 84    --ifm-color-secondary-lighter: #D3DEFF;
 85    --ifm-color-secondary-lightest: #E6ECFF;
 86  
 87    /* Code and Typography */
 88    --docusaurus-highlighted-code-line-bg: rgba(110, 144, 255, 0.2);
 89  
 90    /* Admonition Custom Colors - Dark Mode */
 91    --docusaurus-admonition-tip-bg: rgba(110, 144, 255, 0.15);
 92    --docusaurus-admonition-tip-border: #6E90FF;
 93    --docusaurus-admonition-note-bg: rgba(146, 171, 255, 0.15);
 94    --docusaurus-admonition-note-border: #92ABFF;
 95    --docusaurus-admonition-info-bg: rgba(182, 199, 255, 0.12);
 96    --docusaurus-admonition-info-border: #B6C7FF;
 97  
 98    /* Neutral Colors for UI Components - Dark Mode */
 99    --color-background: #2a2a2a;
100    --color-background-hover: #333333;
101    --color-border: #444444;
102    --color-border-hover: #555555;
103    --color-text-primary: #e0e0e0;
104    --color-text-secondary: #999999;
105    --color-shadow: rgba(0, 0, 0, 0.4);
106  
107    /* Success Colors - Dark Mode */
108    --color-success-bg: #1a3d1f;
109    --color-success-border: #2d5a34;
110    --color-success-text: #8fd69d;
111  }
112  
113  body {
114    font-family: var(--ifm-font-family-base);
115  }
116  
117  /* 5) Headings weight & family */
118  h1, h2, h3, h4, h5, h6 {
119    font-family: var(--ifm-font-family-heading);
120    font-weight: 700;
121  }
122  
123  /* Heading sizes */
124  h1 {
125    font-size: 2rem;
126    font-weight: 700;
127  }
128  
129  h2 {
130    font-size: 1.5rem;
131    font-weight: 700;
132  }
133  
134  h3 {
135    font-size: 1.3rem;
136    font-weight: 700;
137  }
138  
139  h4 {
140    font-size: 1.15rem;
141    font-weight: 600;
142  }
143  
144  /* 6) Buttons, spacing, etc. (optional) */
145  button, .button {
146    border-radius: 8px;
147  }
148  
149  /* Top Navbar active state styling - using dc-docs approach with haystack-docs colors */
150  .navbar__item.navbar__link--active,
151  .navbar__item.navbar__link--active:hover {
152    color: var(--ifm-color-primary) !important;
153    font-weight: 600;
154  }
155  
156  /* Style for the Docs and API Reference navbar items */
157  .navbar__item[href*="/docs/"],
158  .navbar__item[href*="/reference/"] {
159    transition: color 0.2s ease;
160  }
161  
162  .navbar__item[href*="/docs/"]:hover,
163  .navbar__item[href*="/reference/"]:hover {
164    color: var(--ifm-color-primary);
165  }
166  
167  /* Active state for API Reference section */
168  .navbar__item[href*="/reference/"].navbar__link--active,
169  .navbar__item[href*="/reference/"].navbar__link--active:hover {
170    color: var(--ifm-color-primary) !important;
171    font-weight: 600;
172  }
173  
174  /* ========================================
175     BREADCRUMBS - Neutral Grey with Blue Active
176     ======================================== */
177  
178  /* Breadcrumb links - grey for non-active items */
179  .breadcrumbs__link {
180    color: #6B7280;
181  }
182  
183  .breadcrumbs__link:hover {
184    color: var(--ifm-color-primary);
185    background: transparent;
186  }
187  
188  /* Active breadcrumb item - blue */
189  .breadcrumbs__item--active .breadcrumbs__link {
190    color: var(--ifm-color-primary);
191    font-weight: 500;
192  }
193  
194  [data-theme='dark'] .breadcrumbs__link {
195    color: #9CA3AF;
196  }
197  
198  [data-theme='dark'] .breadcrumbs__link:hover {
199    color: var(--ifm-color-primary-light);
200  }
201  
202  [data-theme='dark'] .breadcrumbs__item--active .breadcrumbs__link {
203    color: var(--ifm-color-primary);
204  }
205  
206  /* Footer section titles - make them bold and prominent */
207  .footer .footer__title,
208  .footer .footer__col .footer__title,
209  .footer__links .footer__col .footer__title,
210  .footer--dark .footer__title {
211    font-weight: 900 !important;
212    color: #ffffff !important;
213    font-size: 1.1em !important;
214    text-transform: uppercase !important;
215    letter-spacing: 0.5px !important;
216  }
217  
218  /* Footer links - white on hover for better contrast on green background */
219  .footer__link-item {
220    color: rgba(255, 255, 255, 0.7);
221  }
222  
223  .footer__link-item:hover {
224    color: #ffffff !important;
225    text-decoration: underline;
226  }
227  
228  /* Remove any secondary/lilac color from footer */
229  .footer a {
230    color: rgba(255, 255, 255, 0.7);
231  }
232  
233  .footer a:hover {
234    color: #ffffff !important;
235  }
236  
237  /* Footer copyright - same color as other footer text */
238  .footer__copyright {
239    color: rgba(255, 255, 255, 0.7) !important;
240  }
241  
242  /* Footer - Haystack Blue Background */
243  .footer.footer--dark {
244    background-color: #193BAA !important;
245  }
246  
247  [data-theme='dark'] .footer.footer--dark {
248    background-color: #132C80 !important;
249  }
250  
251  /* Footer Social Media Icons */
252  .footer-social-icons-container {
253    display: flex;
254    flex-direction: column;
255    gap: 0.75rem;
256    margin-left: -0.25rem;
257  }
258  
259  .footer-social-row {
260    display: flex;
261    gap: 1rem;
262    justify-content: flex-start;
263  }
264  
265  .footer-social-icon {
266    width: 24px;
267    height: 24px;
268    filter: brightness(0) invert(1);
269    opacity: 0.7;
270    transition: opacity 0.2s ease, transform 0.2s ease;
271    display: inline-block;
272    vertical-align: middle;
273  }
274  
275  .footer-social-icon:hover {
276    opacity: 1;
277    transform: scale(1.1);
278  }
279  
280  .footer__link-item:has(.footer-social-icon) {
281    display: inline-flex;
282    align-items: center;
283    padding: 0.25rem;
284  }
285  
286  .footer__link-item:has(.footer-social-icon):hover {
287    text-decoration: none;
288  }
289  
290  /* Sidebar navigation - top-level items bold */
291  .menu__list > .menu__list-item > .menu__link {
292    font-weight: 600;
293    font-size: 0.95rem;
294  }
295  
296  .menu__link {
297    color: #4B5563;
298    transition: color 0.2s ease, background-color 0.2s ease;
299    position: relative;
300  }
301  
302  /* Truncate only single-word items (like class names: SentenceTransformersDocumentImageEmbedder) */
303  /* Multi-word phrases (like "Migrating from LangGraph to Haystack") will wrap normally */
304  .menu__link--single-word {
305    white-space: nowrap !important;
306    overflow: hidden;
307    text-overflow: ellipsis;
308  }
309  
310  [data-theme='dark'] .menu__link {
311    color: #E5E7EB;
312  }
313  
314  /* Sidebar navigation - sub-items normal weight */
315  .menu__list .menu__list .menu__link {
316    font-weight: 400;
317    font-size: 0.925rem;
318    padding-left: 1.25rem;
319  }
320  
321  /* Highlight all items in the active path (breadcrumb trail) */
322  .menu__link--active {
323    color: var(--ifm-color-primary-dark) !important;
324    font-weight: 600;
325  }
326  
327  /* Add background highlight only to the actual page (leaf node) */
328  .theme-doc-sidebar-item-link .menu__link--active {
329    background-color: rgba(37, 88, 255, 0.1);
330    border-left: 3px solid var(--ifm-color-primary);
331    padding-left: calc(var(--ifm-menu-link-padding-horizontal) - 3px);
332  }
333  
334  /* Hover state for sidebar links */
335  .menu__link:hover {
336    background-color: rgba(37, 88, 255, 0.06);
337    color: var(--ifm-color-primary);
338    transition: background-color 0.2s ease;
339  }
340  
341  /* Active link hover - keep stronger background */
342  .theme-doc-sidebar-item-link .menu__link--active:hover {
343    background-color: rgba(37, 88, 255, 0.1);
344  }
345  
346  /* Dark mode adjustments for sidebar */
347  [data-theme='dark'] .theme-doc-sidebar-item-link .menu__link--active {
348    background-color: rgba(110, 144, 255, 0.2);
349    border-left: 3px solid var(--ifm-color-primary);
350    color: var(--ifm-color-primary-light) !important;
351  }
352  
353  [data-theme='dark'] .menu__link:hover {
354    background-color: rgba(110, 144, 255, 0.1);
355    color: var(--ifm-color-primary-light);
356  }
357  
358  [data-theme='dark'] .menu__link--active {
359    color: var(--ifm-color-primary-light) !important;
360  }
361  
362  /* ========================================
363     ADMONITION STYLING - Brand Colors
364     ======================================== */
365  
366  /* Tip Admonitions - Match sidebar navigation color */
367  .theme-admonition.alert.alert--success {
368    background-color: rgba(37, 88, 255, 0.08);
369    border-left: 4px solid var(--ifm-color-primary);
370  }
371  
372  .theme-admonition.alert.alert--success .admonition-icon svg {
373    fill: var(--ifm-color-primary);
374  }
375  
376  .theme-admonition.alert.alert--success .admonition-heading {
377    color: var(--ifm-color-primary-dark);
378  }
379  
380  /* Note Admonitions - Blue Tint */
381  .theme-admonition.alert.alert--secondary {
382    background-color: var(--docusaurus-admonition-note-bg);
383    border-left: 4px solid var(--docusaurus-admonition-note-border);
384  }
385  
386  .theme-admonition.alert.alert--secondary .admonition-icon svg {
387    fill: var(--ifm-color-secondary);
388  }
389  
390  .theme-admonition.alert.alert--secondary .admonition-heading {
391    color: var(--ifm-color-secondary-dark);
392  }
393  
394  /* Info Admonitions - Blue Soft */
395  .theme-admonition.alert.alert--info {
396    background-color: var(--docusaurus-admonition-info-bg);
397    border-left: 4px solid var(--docusaurus-admonition-info-border);
398  }
399  
400  .theme-admonition.alert.alert--info .admonition-icon svg {
401    fill: var(--ifm-color-primary-light);
402  }
403  
404  .theme-admonition.alert.alert--info .admonition-heading {
405    color: var(--ifm-color-primary);
406  }
407  
408  /* ========================================
409     INTERACTIVE ELEMENTS - Enhanced Colors
410     ======================================== */
411  
412  /* Primary Links - only underline content links, not navigation */
413  article a {
414    color: var(--ifm-color-primary);
415    transition: text-decoration 0.2s ease;
416  }
417  
418  article a:hover {
419    text-decoration: underline;
420  }
421  
422  /* Reset general link behavior - no underline by default */
423  a {
424    text-decoration: none;
425  }
426  
427  a:hover {
428    text-decoration: none;
429  }
430  
431  /* Navbar links - keep neutral color until hovered/active */
432  .navbar__link {
433    color: var(--ifm-navbar-link-color) !important;
434  }
435  
436  .navbar__link:hover,
437  .navbar__link:focus-visible {
438    color: var(--ifm-navbar-link-hover-color, var(--ifm-color-primary)) !important;
439  }
440  
441  .navbar__link:active {
442    color: var(--ifm-navbar-link-active-color, var(--ifm-color-primary)) !important;
443  }
444  
445  /* Navbar logo title - default to neutral, blue on hover */
446  .navbar__title {
447    color: var(--ifm-navbar-link-color) !important;
448  }
449  
450  .navbar__title:hover {
451    color: var(--ifm-navbar-link-hover-color, var(--ifm-color-primary)) !important;
452  }
453  
454  /* Hide navbar title on mobile/tablet to prevent overlap with search bar */
455  @media (max-width: 996px) {
456    .navbar__title {
457      display: none !important;
458    }
459  
460    /* Ensure navbar brand doesn't grow too large */
461    .navbar__brand {
462      flex-shrink: 0;
463      max-width: fit-content;
464    }
465  }
466  
467  /* Remove underline from navbar logo link */
468  .navbar__logo,
469  .navbar__brand {
470    text-decoration: none !important;
471  }
472  
473  .navbar__logo:hover,
474  .navbar__brand:hover {
475    text-decoration: none !important;
476  }
477  
478  /* Inline Code - Neutral Grey Background */
479  code:not([class*="language-"]) {
480    background-color: #F5F5F7;
481    border: 1px solid #E5E5E7;
482    color: #1D1D1F;
483    padding: 0.15rem 0.4rem;
484    border-radius: 0.25rem;
485  }
486  
487  [data-theme='dark'] code:not([class*="language-"]) {
488    background-color: rgba(255, 255, 255, 0.05);
489    border: 1px solid rgba(255, 255, 255, 0.1);
490    color: #E8E8E8;
491  }
492  
493  /* Links inside inline code - use blue for distinction */
494  a code:not([class*="language-"]),
495  code:not([class*="language-"]) a {
496    color: var(--ifm-color-primary-dark);
497    font-weight: 600;
498  }
499  
500  [data-theme='dark'] a code:not([class*="language-"]),
501  [data-theme='dark'] code:not([class*="language-"]) a {
502    color: var(--ifm-color-primary);
503  }
504  
505  /* Hover state for code links */
506  a:hover code:not([class*="language-"]),
507  code:not([class*="language-"]) a:hover {
508    text-decoration: underline;
509  }
510  
511  /* Primary Buttons */
512  .button--primary {
513    background-color: var(--ifm-color-primary);
514    border-color: var(--ifm-color-primary);
515    color: #ffffff;
516  }
517  
518  .button--primary:hover {
519    background-color: var(--ifm-color-primary-dark);
520    border-color: var(--ifm-color-primary-dark);
521    color: #ffffff;
522  }
523  
524  /* Secondary Buttons - Blue Outline */
525  .button--secondary {
526    background-color: transparent;
527    border: 2px solid var(--ifm-color-primary);
528    color: var(--ifm-color-primary);
529  }
530  
531  .button--secondary:hover {
532    background-color: var(--ifm-color-primary);
533    border-color: var(--ifm-color-primary);
534    color: #ffffff;
535  }
536  
537  /* ========================================
538     CODE BLOCKS - Enhanced Styling
539     ======================================== */
540  
541  /* Code Block Container */
542  .theme-code-block {
543    position: relative;
544    margin-bottom: 1.5rem;
545    border-radius: 8px;
546    overflow: hidden;
547  }
548  
549  /* Language Badge - Positioned at top-right corner */
550  .theme-code-block-with-lang {
551    position: relative;
552  }
553  
554  .code-block-language-badge {
555    position: absolute;
556    top: 0.5rem;
557    right: 0.5rem;
558    background: #E6ECFF;
559    color: #193BAA;
560    font-weight: 600;
561    font-size: 0.6em;
562    text-transform: uppercase;
563    padding: 0.15em 0.5em;
564    border-radius: 0.25rem;
565    letter-spacing: 0.3px;
566    z-index: 1;
567    pointer-events: none;
568    line-height: 1.2;
569  }
570  
571  /* Push action buttons below the language badge */
572  .theme-code-block div[class*="buttonGroup"] {
573    margin-top: 1.5rem;
574  }
575  
576  [data-theme='dark'] .code-block-language-badge {
577    background: rgba(110, 144, 255, 0.2);
578    color: #B6C7FF;
579    border: 1px solid rgba(110, 144, 255, 0.3);
580  }
581  
582  /* Copy Button Styling */
583  .clean-btn.copy-button {
584    border-radius: 0.25rem;
585    transition: background-color 0.2s ease;
586  }
587  
588  .clean-btn.copy-button:hover {
589    background-color: var(--ifm-color-primary-lightest);
590  }
591  
592  [data-theme='dark'] .clean-btn.copy-button:hover {
593    background-color: rgba(110, 144, 255, 0.2);
594  }
595  
596  /* Hide language badge for single-line code blocks */
597  .hide-language-badge .code-block-language-badge {
598    display: none;
599  }
600  
601  /* Hide action buttons for two-line code blocks */
602  .hide-action-buttons div[class*="buttonGroup"] {
603    display: none;
604  }
605  
606  /* ========================================
607     VERSION BADGE & BANNER - Brand Colors
608     ======================================== */
609  
610  /* Version Badge - Lighter grey for better blue contrast */
611  .badge--secondary,
612  .theme-doc-version-badge {
613    background-color: #9CA3AF !important;
614    border-color: #9CA3AF !important;
615    color: #ffffff !important;
616  }
617  
618  [data-theme='dark'] .badge--secondary,
619  [data-theme='dark'] .theme-doc-version-badge {
620    background-color: #6B7280 !important;
621    border-color: #6B7280 !important;
622    color: #ffffff !important;
623  }
624  
625  /* Navbar Version Dropdown - Badge Style with lighter grey */
626  .navbar-version-badge-dropdown {
627    background-color: #9CA3AF !important;
628    border-radius: 12px !important;
629    padding: 3px 10px !important;
630    font-size: 13px !important;
631    margin-right: 10px !important;
632    color: #ffffff !important;
633  }
634  
635  .navbar-version-badge-dropdown .navbar__link,
636  .navbar-version-badge-dropdown .navbar__link *,
637  .navbar-version-badge-dropdown button,
638  .navbar-version-badge-dropdown a,
639  .navbar-version-badge-dropdown span,
640  .navbar__item.navbar-version-badge-dropdown > .navbar__link {
641    color: #ffffff !important;
642    font-weight: 500 !important;
643    padding: 0 !important;
644    transition: color 0.2s ease !important;
645  }
646  
647  /* Light mode: blue TEXT color on hover */
648  .navbar-version-badge-dropdown:hover .navbar__link,
649  .navbar-version-badge-dropdown:hover .navbar__link *,
650  .navbar-version-badge-dropdown:hover button,
651  .navbar-version-badge-dropdown:hover a,
652  .navbar-version-badge-dropdown:hover span,
653  .navbar-version-badge-dropdown .navbar__link:hover,
654  .navbar-version-badge-dropdown .navbar__link:hover * {
655    color: var(--ifm-color-primary-dark) !important;
656    background-color: transparent !important;
657  }
658  
659  /* Force white color on the dropdown caret/arrow */
660  .navbar-version-badge-dropdown::after,
661  .navbar-version-badge-dropdown .navbar__link::after {
662    filter: brightness(0) invert(1) !important;
663    transition: filter 0.2s ease !important;
664  }
665  
666  /* Teal arrow on hover */
667  .navbar-version-badge-dropdown:hover::after,
668  .navbar-version-badge-dropdown:hover .navbar__link::after {
669    filter: none !important;
670  }
671  
672  [data-theme='dark'] .navbar-version-badge-dropdown {
673    background-color: #6B7280 !important;
674    color: #ffffff !important;
675  }
676  
677  [data-theme='dark'] .navbar-version-badge-dropdown .navbar__link,
678  [data-theme='dark'] .navbar-version-badge-dropdown .navbar__link *,
679  [data-theme='dark'] .navbar-version-badge-dropdown button,
680  [data-theme='dark'] .navbar-version-badge-dropdown a,
681  [data-theme='dark'] .navbar-version-badge-dropdown span,
682  [data-theme='dark'] .navbar__item.navbar-version-badge-dropdown > .navbar__link {
683    color: #ffffff !important;
684  }
685  
686  /* Dark mode: blue TEXT color on hover - higher specificity */
687  html[data-theme='dark'] .navbar-version-badge-dropdown:hover .navbar__link,
688  html[data-theme='dark'] .navbar-version-badge-dropdown:hover .navbar__link *,
689  html[data-theme='dark'] .navbar-version-badge-dropdown:hover button,
690  html[data-theme='dark'] .navbar-version-badge-dropdown:hover a,
691  html[data-theme='dark'] .navbar-version-badge-dropdown:hover span,
692  html[data-theme='dark'] .navbar-version-badge-dropdown .navbar__link:hover,
693  html[data-theme='dark'] .navbar-version-badge-dropdown .navbar__link:hover *,
694  html[data-theme='dark'] .navbar__item.navbar-version-badge-dropdown:hover > .navbar__link {
695    color: #6E90FF !important;
696  }
697  
698  /* Unreleased Version Banner */
699  .theme-doc-version-banner.alert--warning {
700    background: linear-gradient(135deg,
701      rgba(25, 59, 170, 0.1) 0%,
702      rgba(110, 144, 255, 0.1) 100%);
703    border-left: 4px solid var(--ifm-color-primary);
704  }
705  
706  [data-theme='dark'] .theme-doc-version-banner.alert--warning {
707    background: linear-gradient(135deg,
708      rgba(110, 144, 255, 0.15) 0%,
709      rgba(182, 199, 255, 0.1) 100%);
710    border-left: 4px solid var(--ifm-color-primary);
711  }
712  
713  /* ========================================
714     TABLE OF CONTENTS - Enhanced Styling
715     ======================================== */
716  
717  .table-of-contents {
718    padding-top: 2.5rem;
719  }
720  
721  .table-of-contents__link {
722    color: #4B5563;
723    position: relative;
724  }
725  
726  [data-theme='dark'] .table-of-contents__link {
727    color: #E5E7EB;
728  }
729  
730  .table-of-contents__link--active {
731    color: var(--ifm-color-primary);
732    font-weight: 600;
733  }
734  
735  /* Active indicator line */
736  .table-of-contents__link--active::before {
737    content: '';
738    position: absolute;
739    left: -1rem;
740    top: 0;
741    bottom: 0;
742    width: 3px;
743    background-color: var(--ifm-color-primary);
744    border-radius: 2px;
745  }
746  
747  [data-theme='dark'] .table-of-contents__link--active {
748    color: var(--ifm-color-primary) !important;
749    font-weight: 600;
750  }
751  
752  .table-of-contents__link--active code {
753    color: var(--ifm-color-primary);
754  }
755  
756  [data-theme='dark'] .table-of-contents__link--active code {
757    color: var(--ifm-color-primary) !important;
758  }
759  
760  .table-of-contents__link:hover {
761    color: var(--ifm-color-primary) !important;
762  }
763  
764  [data-theme='dark'] .table-of-contents__link:hover {
765    color: var(--ifm-color-primary) !important;
766  }
767  
768  /* ========================================
769     DROPDOWN MENUS - Enhanced Colors
770     ======================================== */
771  
772  .dropdown__menu {
773    border-radius: 8px;
774    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
775  }
776  
777  .dropdown__link {
778    color: #374151;
779  }
780  
781  [data-theme='dark'] .dropdown__link {
782    color: #E5E7EB;
783  }
784  
785  /* Active state - keep the color highlight */
786  .dropdown__link--active {
787    background-color: var(--ifm-color-primary-lightest);
788    color: var(--ifm-color-primary);
789  }
790  
791  /* Hover state - gray background only, no color */
792  .dropdown__link:hover {
793    background-color: #F3F4F6;
794    color: #374151;
795  }
796  
797  /* Active item on hover - keep the active color */
798  .dropdown__link--active:hover {
799    background-color: var(--ifm-color-primary-lightest);
800    color: var(--ifm-color-primary);
801  }
802  
803  [data-theme='dark'] .dropdown__link--active {
804    background-color: rgba(110, 144, 255, 0.15);
805    color: var(--ifm-color-primary);
806  }
807  
808  /* Dark mode hover - neutral gray */
809  [data-theme='dark'] .dropdown__link:hover {
810    background-color: #374151;
811    color: #E5E7EB;
812  }
813  
814  /* Dark mode active item on hover - keep the active color */
815  [data-theme='dark'] .dropdown__link--active:hover {
816    background-color: rgba(110, 144, 255, 0.15);
817    color: var(--ifm-color-primary);
818  }
819  
820  /* ========================================
821     PAGINATION - Brand Colors
822     ======================================== */
823  
824  .pagination-nav__link:hover {
825    border-color: var(--ifm-color-primary);
826  }
827  
828  .pagination-nav__link:hover .pagination-nav__label {
829    color: var(--ifm-color-primary);
830  }
831  
832  /* ========================================
833     SEARCH BAR - Enhanced Styling
834     ======================================== */
835  
836  .navbar__search-input:focus {
837    border-color: var(--ifm-color-primary);
838    box-shadow: 0 0 0 0.2rem rgba(37, 88, 255, 0.2);
839  }
840  
841  /* ========================================
842     TABS - Brand Colors
843     ======================================== */
844  
845  .tabs__item--active {
846    border-bottom-color: var(--ifm-color-primary);
847    color: var(--ifm-color-primary);
848  }
849  
850  .tabs__item:hover {
851    color: var(--ifm-color-primary-light);
852  }
853  
854  /* ========================================
855     IMAGES - Dark Mode White Background
856     ======================================== */
857  
858  /* Add white background to images with transparent PNGs in dark mode */
859  [data-theme='dark'] .img-white-bg img,
860  [data-theme='dark'] .img-white-bg picture img {
861    background-color: #ffffff;
862    padding: 1rem;
863    border-radius: 8px;
864  }
865  
866  /* Alternative: light grey background (less harsh) */
867  [data-theme='dark'] .img-light-bg img,
868  [data-theme='dark'] .img-light-bg picture img {
869    background-color: #f8f9fa;
870    padding: 1rem;
871    border-radius: 8px;
872  }
873  
874  /* ========================================
875     KEY-VALUE TABLE STYLING - Headerless Tables
876     ======================================== */
877  
878  .key-value-table {
879    width: 100%;
880    overflow-x: auto;
881  }
882  
883  .key-value-table thead {
884    display: none;
885  }
886  
887  .key-value-table table {
888    width: 100%;
889    border-collapse: collapse;
890    table-layout: auto;
891  }
892  
893  .key-value-table td {
894    padding: 0.6rem 0.75rem;
895    vertical-align: top;
896  }
897  
898  .key-value-table td:first-child {
899    font-weight: 600;
900    width: 1%;
901    min-width: 180px;
902    padding-right: 1rem;
903  }
904  
905  .key-value-table td:last-child {
906    white-space: normal;
907    overflow-wrap: break-word;
908    word-break: break-word;
909  }
910  
911  .key-value-table td a {
912    word-break: break-word;
913  }
914  
915  @media (max-width: 600px) {
916    .key-value-table {
917      overflow-x: auto;
918    }
919  
920    .key-value-table table {
921      min-width: 500px;
922    }
923  }
924  
925  /* ========================================
926     SIDE-BY-SIDE CODE COMPARISON
927     ======================================== */
928  
929  .code-comparison {
930    display: flex;
931    gap: 1.5rem;
932    align-items: stretch;
933    margin: 1rem 0 2rem;
934  }
935  
936  .code-comparison__column {
937    flex: 1 1 0;
938    min-width: 0;
939  }
940  
941  .code-comparison .theme-code-block {
942    height: 100%;
943  }
944  
945  @media (max-width: 996px) {
946    .code-comparison {
947      flex-direction: column;
948    }
949  }
950  
951  /* ========================================= */
952  /* CRITICAL: Version badge hover color fix  */
953  /* These rules MUST be at the end to ensure */
954  /* they override all other hover styles     */
955  /* ========================================= */
956  
957  /* Dark mode version badge - blue text on hover */
958  html[data-theme='dark'] .navbar-version-badge-dropdown:hover,
959  html[data-theme='dark'] .navbar-version-badge-dropdown:hover > a,
960  html[data-theme='dark'] .navbar-version-badge-dropdown:hover > a.navbar__link,
961  html[data-theme='dark'] .navbar-version-badge-dropdown:hover .navbar__link,
962  html[data-theme='dark'] .navbar-version-badge-dropdown > a:hover,
963  html[data-theme='dark'] .navbar-version-badge-dropdown > a.navbar__link:hover,
964  html[data-theme='dark'] .navbar-version-badge-dropdown a.navbar__link:hover {
965    color: #6E90FF !important;
966  }
967  
968  /* Also target the dropdown arrow/caret in dark mode on hover */
969  html[data-theme='dark'] .navbar-version-badge-dropdown:hover::after,
970  html[data-theme='dark'] .navbar-version-badge-dropdown:hover > a::after {
971    filter: none !important;
972  }
973  
974  /* ========================================
975     COPY DROPDOWN - Sticky Button
976     ======================================== */
977  
978  /* Copy dropdown sticky button - floats at the top-right of the content column */
979  .copy-dropdown-sticky {
980    float: right;
981    position: sticky;
982    top: 76px;
983    z-index: 100;
984    margin-bottom: -40px;
985    margin-left: 16px;
986  }
987  
988  @media (max-width: 768px) {
989    .copy-dropdown-sticky {
990      top: 65px;
991    }
992  }
993  
994  @media print {
995    .copy-dropdown-sticky {
996      display: none !important;
997    }
998  }