/* Built: 2026-01-29 15:45:51 | Commit: 90bd77f */
/**
 * ============================================================================
 * STRIIM DOCUMENTATION DESIGN SYSTEM - TOKENS
 * ============================================================================
 * Source: Figma Design Tokens
 * URL: https://www.figma.com/design/JCKkyxWYeTsWX51Tn8a4Lh/Documentation-Design-Tokens
 *
 * This file contains all design tokens as CSS custom properties.
 * Tokens are the foundational values for colors, typography, and spacing.
 *
 * SECTIONS:
 *   1. Font Imports
 *   2. Color Scales (9 palettes × 10 shades = 90 tokens)
 *   3. Semantic Colors (58 tokens)
 *   4. Typography
 *   5. Spacing & Layout
 *   6. Effects (borders, radius, shadows)
 * ============================================================================
 */

/* ============================================================================
   1. FONT IMPORTS
   Must be at the very top of the compiled CSS file
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ==========================================================================
     2. COLOR SCALES
     9 color palettes with 10 shades each (50-900)
     50 = darkest, 900 = lightest
     ========================================================================== */

  /* Purple Scale */
  --color-scale-purple-50: #25122a;
  --color-scale-purple-100: #4a2554;
  --color-scale-purple-200: #70377d;
  --color-scale-purple-300: #954aa7;
  --color-scale-purple-400: #ba5cd1;
  --color-scale-purple-500: #c87dda;
  --color-scale-purple-600: #d69de3;
  --color-scale-purple-700: #e3beed;
  --color-scale-purple-800: #f1def6;
  --color-scale-purple-900: #f8effa;

  /* Indigo Scale */
  --color-scale-indigo-50: #18172d;
  --color-scale-indigo-100: #2f2f59;
  --color-scale-indigo-200: #474686;
  --color-scale-indigo-300: #5e5eb2;
  --color-scale-indigo-400: #7675df;
  --color-scale-indigo-500: #9191e5;
  --color-scale-indigo-600: #adacec;
  --color-scale-indigo-700: #c8c8f2;
  --color-scale-indigo-800: #e4e3f9;
  --color-scale-indigo-900: #f1f1fc;

  /* Teal Scale */
  --color-scale-teal-50: #082123;
  --color-scale-teal-100: #114346;
  --color-scale-teal-200: #19646a;
  --color-scale-teal-300: #22868d;
  --color-scale-teal-400: #2aa7b0;
  --color-scale-teal-500: #55b9c0;
  --color-scale-teal-600: #7fcad0;
  --color-scale-teal-700: #aadcdf;
  --color-scale-teal-800: #d4edef;
  --color-scale-teal-900: #eaf6f7;

  /* Red Scale */
  --color-scale-red-50: #2c080f;
  --color-scale-red-100: #58111e;
  --color-scale-red-200: #83192c;
  --color-scale-red-300: #af223b;
  --color-scale-red-400: #db2a4a;
  --color-scale-red-500: #e2556e;
  --color-scale-red-600: #e97f92;
  --color-scale-red-700: #f1aab7;
  --color-scale-red-800: #f8d4db;
  --color-scale-red-900: #fbeaed;

  /* Yellow Scale */
  --color-scale-yellow-50: #312505;
  --color-scale-yellow-100: #62490a;
  --color-scale-yellow-200: #926e0e;
  --color-scale-yellow-300: #c39213;
  --color-scale-yellow-400: #f4b718;
  --color-scale-yellow-500: #f6c546;
  --color-scale-yellow-600: #f8d474;
  --color-scale-yellow-700: #fbe2a3;
  --color-scale-yellow-800: #fdf1d1;
  --color-scale-yellow-900: #fef8e8;

  /* Green Scale */
  --color-scale-green-50: #082213;
  --color-scale-green-100: #114526;
  --color-scale-green-200: #196738;
  --color-scale-green-300: #228a4b;
  --color-scale-green-400: #2aac5e;
  --color-scale-green-500: #55bd7e;
  --color-scale-green-600: #7fcd9e;
  --color-scale-green-700: #aadebf;
  --color-scale-green-800: #d4eedf;
  --color-scale-green-900: #eaf7ef;

  /* Neutral Scale (Greyscale) */
  --color-scale-neutral-50: #1a1d1f;
  --color-scale-neutral-100: #343a3f;
  --color-scale-neutral-200: #4e565e;
  --color-scale-neutral-300: #68737e;
  --color-scale-neutral-400: #82909d;
  --color-scale-neutral-500: #9ba6b1;
  --color-scale-neutral-600: #b4bcc4;
  --color-scale-neutral-700: #cdd3d8;
  --color-scale-neutral-800: #e6e9eb;
  --color-scale-neutral-900: #f2f4f5;

  /* Blue Scale (Primary) */
  --color-scale-blue-50: #021f30;
  --color-scale-blue-100: #033e5f;
  --color-scale-blue-200: #055d8f;
  --color-scale-blue-300: #067cbe;
  --color-scale-blue-400: #089bee;
  --color-scale-blue-500: #39aff1;
  --color-scale-blue-600: #6bc3f5;
  --color-scale-blue-700: #9cd7f8;
  --color-scale-blue-800: #ceebfc;
  --color-scale-blue-900: #e6f5fd;

  /* Brand Scale (Striim Purple) */
  --color-scale-brand-50: #0f0f1d;
  --color-scale-brand-100: #1e1e39;
  --color-scale-brand-200: #2e2e56;
  --color-scale-brand-300: #3d3d72;
  --color-scale-brand-400: #4c4c8f;
  --color-scale-brand-500: #7070a5;
  --color-scale-brand-600: #9494bc;
  --color-scale-brand-700: #b7b7d2;
  --color-scale-brand-800: #dbdbe9;
  --color-scale-brand-900: #ededf4;

  /* ==========================================================================
     3. SEMANTIC COLORS
     Purpose-driven color aliases that reference the scale tokens
     ========================================================================== */

  /* Brand Colors */
  --color-brand-700: #2e2e56;
  --color-brand-200: #b7b7d2;

  /* Button Colors */
  --color-button-default: #067cbe;
  --color-button-hover: #055d8f;
  --color-button-press: #033e5f;
  --color-button-primary-default: #089bee;
  --color-button-primary-hover: #067cbe;

  /* Button Border Colors */
  --color-button-border-primary-default: #055d8f;
  --color-button-border-primary-hover: #033e5f;
  --color-button-border-primary-press: #021f30;
  --color-button-border-secondary-default: #6bc3f5;

  /* Surface Colors */
  --color-surface-white: #ffffff;
  --color-surface-primary: #e6f5fd;
  --color-surface-neutral: #f2f4f5;
  --color-surface-dark: #0f0f42;
  --color-surface-sidebar: #f7fbff;
  --color-surface-button-hover: #e6f5fd;
  --color-surface-button-press: #ceebfc;
  --color-surface-tag-light: #ceebfc;
  --color-surface-tag-dark: #067cbe;
  --color-surface-code: #e4e4f5;

  /* Callout Surface Colors */
  --color-surface-callout-note: #ddfbe9;
  --color-surface-callout-caution: #fff8e5;
  --color-surface-callout-warning: #faedef;

  /* Table Surface Colors */
  --color-surface-table-header-theme1: #ceebfc;
  --color-surface-table-header-theme2: #9cd7f8;
  --color-surface-table-cell-white: #ffffff;
  --color-surface-table-cell-shade: #f2f4f5;
  --color-surface-table-cell-first-column: #e6e9eb;
  --color-surface-table-cell-section: #e6f5fd;

  /* Text Colors - Default */
  --color-text-heading: #2e2e56;
  --color-text-paragraph: #1a1d1f;
  --color-text-caption: #4e565e;
  --color-text-primary: #067cbe;
  --color-text-primary-on-surface: #055d8f;
  --color-text-code-default: #4c4c8f;
  --color-text-code-function: #ba5cd1;

  /* Text Colors - On Color */
  --color-text-on-color-heading: #ffffff;
  --color-text-on-color-paragraph: #ffffff;

  /* Text Colors - Links */
  --color-text-link-default: #067cbe;
  --color-text-link-hover: #055d8f;
  --color-text-link-press: #033e5f;

  /* Text Colors - Menu */
  --color-text-menu-default: #4e565e;
  --color-text-menu-hover: #089bee;
  --color-text-menu-active: #067cbe;

  /* Text Colors - Input */
  --color-text-input-hint: #68737e;
  --color-text-input-filled: #343a3f;

  /* Text Colors - Button */
  --color-text-button-default: #067cbe;

  /* Text Colors - Table */
  --color-text-table-header-theme1: #055d8f;
  --color-text-table-header-theme2: #033e5f;
  --color-text-table-cell: #1a1d1f;
  --color-text-table-section: #055d8f;

  /* Border Colors */
  --color-border-default: #cdd3d8;
  --color-border-primary: #9cd7f8;
  --color-border-input-default: #b4bcc4;
  --color-border-input-hover: #9ba6b1;
  --color-border-input-active: #089bee;
  --color-border-table-header: #6bc3f5;
  --color-border-table-cell: #b4bcc4;
  --color-border-code: #d8e4f0;

  /* Callout Border Colors */
  --color-border-callout-note: #bcf7d4;
  --color-border-callout-caution: #fff1cc;
  --color-border-callout-warning: #f5dadf;

  /* Icon Colors */
  --color-icon-white: #ffffff;
  --color-icon-dark: #067cbe;
  --color-icon-primary-default: #089bee;
  --color-icon-primary-hover: #067cbe;
  --color-icon-primary-press: #055d8f;
  --color-icon-input: #4e565e;
  --color-icon-table-cell: #1a1d1f;

  /* ==========================================================================
     4. TYPOGRAPHY
     Font families, weights, sizes, line heights, and letter spacing
     ========================================================================== */

  /* Font Families */
  --font-family-heading: 'Nunito', sans-serif;
  --font-family-body: 'Inter', sans-serif;
  --font-family-mono: 'Geist Mono', 'Menlo', 'Courier New', monospace;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Font Sizes */
  --font-size-caption: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-code: 16px;          /* Figma: Code blocks use 16px */
  --font-size-lg: 20px;
  --font-size-h4: 18px;
  --font-size-h3: 24px;
  --font-size-h2: 32px;
  --font-size-h1: 44px;

  /* Line Heights */
  --line-height-caption: 20px;
  --line-height-sm: 24px;
  --line-height-code: 24px;        /* Figma: Code blocks use 24px */
  --line-height-base: 28px;
  --line-height-lg: 28px;
  --line-height-h4: 24px;
  --line-height-h3: 28px;
  --line-height-h2: 36px;
  --line-height-h1: 48px;

  /* Letter Spacing */
  --letter-spacing-tight-3: -1.32px;
  --letter-spacing-tight-2: -0.64px;
  --letter-spacing-tight-1: -0.24px;
  --letter-spacing-tight-05: -0.2px;
  --letter-spacing-normal: 0;
  --letter-spacing-wide-1: 0.12px;
  --letter-spacing-wide-2: 0.16px;
  --letter-spacing-wide-3: 0.24px;
  --letter-spacing-wide-4: 0.36px;

  /* ==========================================================================
     5. SPACING & LAYOUT
     Consistent spacing scale and layout margins
     ========================================================================== */

  /* Spacing Scale (4px base unit) */
  --space-0: 0;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;

  /* Layout Margins - Desktop */
  --layout-margin-desktop: 48px;
  --layout-spacing-desktop: 32px;

  /* Layout Margins - Tablet */
  --layout-margin-tablet: 32px;
  --layout-spacing-tablet: 24px;

  /* Layout Margins - Mobile */
  --layout-margin-mobile: 24px;
  --layout-spacing-mobile: 20px;

  /* ==========================================================================
     6. EFFECTS
     Border radius, border widths, shadows, and transitions
     ========================================================================== */

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Border Width */
  --border-width-sm: 1px;
  --border-width-md: 2px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* Breakpoints (for reference - use in media queries) */
  /* Mobile: 390px */
  /* Tablet: 864px */
  /* Desktop: 1920px */
}

/* ============================================================================
   END OF TOKENS
   ============================================================================ */

/**
 * ============================================================================
 * STRIIM DOCUMENTATION DESIGN SYSTEM - BASE STYLES
 * ============================================================================
 * 
 * Base element styles and typography. These styles apply to raw HTML elements
 * without classes, establishing the foundation for all content.
 * 
 * SECTIONS:
 *   1. Base Reset
 *   2. Body & Document
 *   3. Links
 *   4. Headings (H1-H6)
 *   5. Paragraphs & Text
 *   6. Lists
 *   7. Inline Elements
 * ============================================================================
 */

/* ============================================================================
   1. BASE RESET
   Minimal reset for consistent cross-browser rendering
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ============================================================================
   2. BODY & DOCUMENT
   Root document styles
   ============================================================================ */

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text-paragraph);
  background-color: var(--color-surface-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   3. LINKS
   Anchor element styles with hover/active states
   ============================================================================ */

a {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text-link-default);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

a:active {
  color: var(--color-text-link-press);
}

/* ============================================================================
   4. HEADINGS
   H1-H6 with Nunito font family and proper hierarchy
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-tight-3);
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-tight-2);
}

h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-tight-1);
}

h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-normal);
  font-weight: var(--font-weight-bold);
}

h5 {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-normal);
  font-weight: var(--font-weight-semibold);
}

h6 {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-normal);
  font-weight: var(--font-weight-semibold);
}

/* ============================================================================
   5. PARAGRAPHS & TEXT
   Body text styling with max-width for readability
   ============================================================================ */

p {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text-paragraph);
  margin: 0 0 var(--space-4);
  max-width: 920px;
}

/* ============================================================================
   6. LISTS
   Ordered and unordered list styles
   ============================================================================ */

ul, ol {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text-paragraph);
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}

li {
  margin-bottom: var(--space-2);
}

/* Nested lists - tighter spacing */
ul ul, ul ol, ol ul, ol ol {
  margin-top: var(--space-2);
  margin-bottom: 0;
}

/* ============================================================================
   7. INLINE ELEMENTS
   Strong, emphasis, code, and other inline text styles
   ============================================================================ */

strong, b {
  font-weight: var(--font-weight-semibold);
}

em, i {
  font-style: italic;
}

/* Inline code - distinct from code blocks */
code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-code-default);
  background-color: var(--color-scale-indigo-800);
  padding: var(--space-0-5) var(--space-1);
  border-radius: var(--radius-xs);
}

/* Prevent code inside links from inheriting link color */
a code {
  color: inherit;
}

/* Caption text style */
.text-caption {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-wide-1);
  color: var(--color-text-caption);
}

/* ============================================================================
   END OF BASE STYLES
   ============================================================================ */

/**
 * ============================================================================
 * STRIIM DOCUMENTATION DESIGN SYSTEM - COMPONENTS
 * ============================================================================
 *
 * Reusable UI component styles for documentation elements.
 * All specs verified against Figma Design Tokens file.
 *
 * SECTIONS:
 *   1. Buttons (Primary, Secondary-Md, Secondary-Sm, CTA)
 *   2. Callouts & Admonitions (Note, Warning, Caution, Important)
 *   3. Code Blocks (Syntax Highlighting)
 *   4. Tables (Themes 1/2, Section Rows, Fixed Columns)
 *   5. Navigation Components (Breadcrumbs, TOC)
 *   6. Form Inputs (Text, Search, with Icon support)
 *   7. Tags & Badges / Chips (Light, Dark)
 *   8. Notifications (Alert banners)
 * ============================================================================
 */

/* ============================================================================
   1. BUTTONS
   Primary and secondary button styles with hover/active/focus states
   Figma: Font Inter Regular 14px, line-height 24px
   ============================================================================ */

/* Base button styles */
.btn,
button.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);            /* 12px 20px */
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);                    /* 14px */
  font-weight: var(--font-weight-regular);           /* 400 */
  line-height: var(--line-height-sm);                /* 24px */
  border-radius: var(--radius-sm);                   /* 6px - Figma spec */
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  position: relative;
}

/* Primary Button - Figma: bg #067cbe, border #055d8f, text white */
.btn-primary {
  background-color: var(--color-button-default);
  color: var(--color-text-on-color-paragraph);
  border: var(--border-width-sm) solid var(--color-button-border-primary-default);
}

.btn-primary:hover {
  background-color: var(--color-button-hover);
  border-color: var(--color-button-border-primary-hover);
}

.btn-primary:active {
  background-color: var(--color-button-press);
  border-color: var(--color-button-border-primary-press);
}

.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-button-border-primary-default);
}

/* Secondary Button Medium - Figma: border #6bc3f5, padding 12px 20px, radius 6px */
.btn-secondary,
.btn-secondary-md {
  background-color: transparent;
  color: var(--color-text-button-default);
  border: var(--border-width-sm) solid var(--color-button-border-secondary-default);
  padding: var(--space-3) var(--space-5);            /* 12px 20px */
  border-radius: var(--radius-sm);                   /* 6px */
}

.btn-secondary:hover,
.btn-secondary-md:hover {
  background-color: var(--color-surface-button-hover);
  color: var(--color-text-link-hover);
}

.btn-secondary:active,
.btn-secondary-md:active {
  background-color: var(--color-surface-button-press);
  color: var(--color-text-link-hover);
}

.btn-secondary:focus,
.btn-secondary-md:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-button-border-secondary-default);
}

/* Secondary Button Small - Figma: padding 8px 16px, radius 4px */
.btn-secondary-sm {
  background-color: transparent;
  color: var(--color-text-button-default);
  border: var(--border-width-sm) solid var(--color-button-border-secondary-default);
  padding: var(--space-2) var(--space-4);            /* 8px 16px */
  border-radius: var(--radius-xs);                   /* 4px */
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
}

.btn-secondary-sm:hover {
  background-color: var(--color-surface-button-hover);
  color: var(--color-text-link-hover);
}

.btn-secondary-sm:active {
  background-color: var(--color-surface-button-press);
  color: var(--color-text-link-hover);
}

.btn-secondary-sm:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-button-border-secondary-default);
}

/* Yellow CTA Button - Figma: Free Trial button */
.btn-cta {
  background-color: var(--color-scale-yellow-400);   /* #f4b718 */
  color: var(--color-text-heading);                  /* #2e2e56 */
  border: var(--border-width-sm) solid var(--color-button-border-primary-default);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
}

.btn-cta:hover {
  background-color: var(--color-scale-yellow-500);
}

/* Disabled state */
.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-secondary-sm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   2. CALLOUTS & ADMONITIONS
   Note, Warning, Caution, and Important boxes
   ============================================================================ */

/* Base callout styles */
.note,
.warning,
.caution,
.important {
  position: relative;
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-11);
  border-radius: var(--radius-md);
  border-left: var(--border-width-md) solid;
  max-width: 920px;
}

/* Callout titles */
.note h3,
.warning h3,
.caution h3,
.important h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-h3);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-2);
}

/* Callout paragraphs */
.note > p,
.warning > p,
.caution > p,
.important > p {
  margin: 0 0 var(--space-3);
}

.note > p:last-child,
.warning > p:last-child,
.caution > p:last-child,
.important > p:last-child {
  margin-bottom: 0;
}

/* Note - Green/Success */
.note {
  background-color: var(--color-scale-green-900);
  border-color: var(--color-scale-green-500);
}

/* Warning - Red/Danger */
.warning {
  background-color: var(--color-scale-red-900);
  border-color: var(--color-scale-red-500);
}

/* Caution - Yellow/Warning */
.caution {
  background-color: var(--color-scale-yellow-900);
  border-color: var(--color-scale-yellow-400);
}

/* Important - Blue/Info */
.important {
  background-color: var(--color-scale-blue-900);
  border-color: var(--color-scale-blue-400);
}

/* ============================================================================
   3. CODE BLOCKS
   Syntax highlighted code blocks and copy button
   Figma: Geist Mono Medium 16px, line-height 24px, letter-spacing 0.16px
   ============================================================================ */

/* Code block wrapper */
.paligocode-wrapper {
  position: relative;
  max-width: 920px;
  margin-bottom: var(--space-5);
}

/* Highlight.js code blocks - Figma: bg #f2f4f5, border #cdd3d8, radius 8px */
.hljs {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-code);                  /* 16px - Figma spec */
  font-weight: var(--font-weight-medium);            /* 500 - Figma spec */
  line-height: var(--line-height-code);              /* 24px - Figma spec */
  letter-spacing: var(--letter-spacing-wide-2);      /* 0.16px - Figma spec */
  color: var(--color-text-code-default);             /* #4c4c8f - Figma spec */
  background-color: var(--color-surface-neutral);    /* #f2f4f5 */
  border: var(--border-width-sm) solid var(--color-border-default);  /* #cdd3d8 */
  border-radius: var(--radius-md);                   /* 8px */
  padding: var(--space-4);                           /* 16px */
  overflow-x: auto;
  max-width: 920px;
}

/* Inline code */
code:not(.hljs) {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-code-default);
  background-color: var(--color-surface-neutral);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

/* Syntax highlighting - Keywords - Figma: #ba5cd1 (purple) */
.hljs-keyword,
.hljs-reserved {
  color: var(--color-text-code-function);            /* #ba5cd1 */
}

/* Syntax highlighting - Strings */
.hljs-string {
  color: var(--color-scale-purple-400);
}

/* Syntax highlighting - Comments */
.hljs-comment {
  color: var(--color-text-caption);
  font-style: italic;
}

/* Syntax highlighting - Functions */
.hljs-function,
.hljs-title {
  color: var(--color-text-code-function);
}

/* Copy-to-clipboard button in code blocks */
.paligocode-wrapper .btn-primary {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-caption);
  background-color: var(--color-surface-white);
  color: var(--color-text-link-default);
  border-color: var(--color-text-link-default);
  border-radius: var(--radius-sm);
}

/* ============================================================================
   4. TABLES
   Figma Table Styles (A, B, C, D) - nodes 2011:5503-5506

   Key differences from typical tables:
   - Table A: White cells (no striping), first column bold
   - Table B: Section rows with light blue, centered headers after first
   - Table C: First column gray background (#e6e9eb), Theme 2 header for first col
   - Table D: White cells (no striping), first column bold

   Note: Figma shows NO alternating row striping on any table style.
   Only use .table-striped class explicitly if striping is desired.
   ============================================================================ */

/* Table wrapper for horizontal scroll */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  /* No border or border-radius - tables should have clean edges */
}

/* Table base styles */
table,
.table,
.informaltable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-5);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);                    /* 14px */
  line-height: var(--line-height-sm);                /* 24px */
}

/* Table header - Theme 1 (Default) - Figma: bg #ceebfc, text #055d8f */
table thead th,
.table th,
.informaltable th {
  font-weight: var(--font-weight-semibold);          /* 600 */
  color: var(--color-text-table-header-theme1);      /* #055d8f */
  background-color: var(--color-surface-table-header-theme1);  /* #ceebfc */
  border-bottom: var(--border-width-sm) solid var(--color-border-table-header);  /* #6bc3f5 */
  padding: var(--space-4);                           /* 16px */
  text-align: left;
}

/* Table cells - Regular content with Zebra Stripes (Table A default)
   Figma: odd rows white, even rows shaded (#f2f4f5)

   NOTE: Zebra stripes applied to base selectors (table, .informaltable) because
   Paligo outputs tables as <table class="informaltable"> without .table-a class.
   Table B/C/D styles override back to white where needed. */
table tbody td,
.table td,
.informaltable td {
  font-weight: var(--font-weight-regular);           /* 400 */
  color: var(--color-text-table-cell);               /* #1a1d1f */
  border-bottom: var(--border-width-sm) solid var(--color-border-table-cell);  /* #b4bcc4 */
  padding: var(--space-4);                           /* 16px */
  vertical-align: top;
}

/* Zebra stripes - Odd rows (1, 3, 5...) white background */
table tbody tr:nth-child(odd) td,
.table tbody tr:nth-child(odd) td,
.informaltable tbody tr:nth-child(odd) td {
  background-color: var(--color-surface-table-cell-white);
}

/* Zebra stripes - Even rows (2, 4, 6...) shaded background */
table tbody tr:nth-child(even) td,
.table tbody tr:nth-child(even) td,
.informaltable tbody tr:nth-child(even) td {
  background-color: var(--color-surface-table-cell-shade);  /* #f2f4f5 */
}

/* First column - Bold text (used in Table A, D) */
table tbody td:first-child,
.table td:first-child,
.informaltable td:first-child {
  font-weight: var(--font-weight-semibold);          /* 600 */
}

/* --------------------------------
   TABLE STYLE A: Basic with Bold First Column + Zebra Stripes
   Figma node: 2011:5506
   - Theme 1 header (light blue #ceebfc)
   - Zebra striping: even rows shaded (#f2f4f5), odd rows white
   - First column bold
   -------------------------------- */
/* Odd rows (1, 3, 5...) - white background */
.table--style-a tbody tr:nth-child(odd) td,
.table-a tbody tr:nth-child(odd) td {
  background-color: var(--color-surface-table-cell-white);
}

/* Even rows (2, 4, 6...) - shaded background (zebra stripe) */
.table--style-a tbody tr:nth-child(even) td,
.table-a tbody tr:nth-child(even) td {
  background-color: var(--color-surface-table-cell-shade);  /* #f2f4f5 */
}

/* --------------------------------
   TABLE STYLE B: Section Rows with Checkmarks
   Figma node: 2011:5503
   - Theme 1 header
   - Section rows with light blue background (#e6f5fd)
   - Centered headers after first column
   - Content cells centered
   - NO zebra striping (white cells)
   -------------------------------- */
/* Override zebra stripes - all rows white */
.table--style-b tbody tr:nth-child(odd) td,
.table--style-b tbody tr:nth-child(even) td,
.table-b tbody tr:nth-child(odd) td,
.table-b tbody tr:nth-child(even) td {
  background-color: var(--color-surface-table-cell-white);
}

.table--style-b th:not(:first-child),
.table-b th:not(:first-child) {
  text-align: center;
}

.table--style-b td:not(:first-child),
.table-b td:not(:first-child) {
  text-align: center;
}

/* First column (labels) stays left-aligned with medium weight */
.table--style-b td:first-child,
.table-b td:first-child {
  text-align: left;
  font-weight: var(--font-weight-medium);            /* 500 - slightly less bold */
}

/* Section row - Figma: bg #e6f5fd, text #055d8f */
.table--style-b .table__section-row td,
.table-b .table__section-row td,
tr.table-section td,
.table-b tr.section td {
  font-weight: var(--font-weight-regular);           /* 400 - Not bold */
  color: var(--color-text-table-section);            /* #055d8f */
  background-color: var(--color-surface-table-cell-section);  /* #e6f5fd */
  border-bottom: var(--border-width-sm) solid var(--color-border-table-header);  /* #6bc3f5 */
  text-align: left;
}

/* Checkmark icon in cells */
.table__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-text-table-cell);               /* #1a1d1f - black checkmark */
}

.table__check svg {
  width: 16px;
  height: 16px;
}

/* Dash for "no" indicator */
.table__dash {
  display: inline-block;
  width: 12px;
  height: 2px;
  background-color: var(--color-border-table-cell);
  vertical-align: middle;
}

/* --------------------------------
   TABLE STYLE C: First Column Highlight
   Figma node: 2011:5504
   - First header cell uses Theme 2 (darker blue #9cd7f8)
   - Other headers use Theme 1 (#ceebfc)
   - First column cells have gray background (#e6e9eb)
   - NO zebra striping (white cells)
   -------------------------------- */
/* Override zebra stripes - all rows white, first column gray */
.table--style-c tbody tr:nth-child(odd) td,
.table--style-c tbody tr:nth-child(even) td,
.table-c tbody tr:nth-child(odd) td,
.table-c tbody tr:nth-child(even) td {
  background-color: var(--color-surface-table-cell-white);
}

.table--style-c th:first-child,
.table-c th:first-child {
  background-color: var(--color-surface-table-header-theme2);  /* #9cd7f8 */
  color: var(--color-text-table-header-theme2);      /* #033e5f */
}

/* First column cells - gray background (overrides zebra stripe) */
.table--style-c tbody tr:nth-child(odd) td:first-child,
.table--style-c tbody tr:nth-child(even) td:first-child,
.table-c tbody tr:nth-child(odd) td:first-child,
.table-c tbody tr:nth-child(even) td:first-child {
  font-weight: var(--font-weight-semibold);          /* 600 */
  background-color: var(--color-surface-table-cell-first-column);  /* #e6e9eb */
}

/* --------------------------------
   TABLE STYLE D: Simple Definition
   Figma node: 2011:5505
   - Theme 1 header
   - White cells, NO zebra striping
   - First column bold
   -------------------------------- */
/* Override zebra stripes - all rows white */
.table--style-d tbody tr:nth-child(odd) td,
.table--style-d tbody tr:nth-child(even) td,
.table-d tbody tr:nth-child(odd) td,
.table-d tbody tr:nth-child(even) td {
  background-color: var(--color-surface-table-cell-white);
}

.table--style-d td:first-child,
.table-d td:first-child {
  font-weight: var(--font-weight-semibold);
}

/* --------------------------------
   OPTIONAL: Striped Rows
   Only apply when .table-striped class is used
   -------------------------------- */
.table-striped tbody tr:nth-child(even) td {
  background-color: var(--color-surface-table-cell-shade);  /* #f2f4f5 */
}

/* --------------------------------
   Icon cells in tables
   -------------------------------- */
td.icon-cell,
td.text-center {
  text-align: center;
  vertical-align: middle;
}

/* ============================================================================
   5. NAVIGATION COMPONENTS
   Breadcrumbs, TOC links, and menu items
   ============================================================================ */

/* Breadcrumb base container (namespaced to avoid Paligo conflicts) */
.sl-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-body);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-wide-3);
}

/* Breadcrumb links */
.sl-breadcrumb .sl-breadcrumb-link a {
  color: var(--color-text-link-default);
  text-decoration: none;
}

.sl-breadcrumb .sl-breadcrumb-link a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

/* Current page in breadcrumb */
.sl-breadcrumb-node {
  color: var(--color-text-paragraph);
  font-weight: var(--font-weight-regular);
}

/* Section TOC (in-page table of contents) */
.section-toc-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-lg);
  color: var(--color-text-heading);
  margin-bottom: var(--space-3);
}

.section-toc .topic-link {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  color: var(--color-text-link-default);
  text-decoration: none;
  padding: var(--space-1) 0;
  display: block;
}

.section-toc .topic-link:hover {
  color: var(--color-text-link-hover);
}

/* ============================================================================
   6. FORM INPUTS
   Text inputs, search fields, and form controls
   Figma: padding 12px vertical / 16px left, border-radius 6px
   ============================================================================ */

/* Base input styles */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
.form-control {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-3) var(--space-4);            /* 12px 16px */
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);                    /* 14px */
  font-weight: var(--font-weight-regular);           /* 400 */
  line-height: var(--line-height-sm);                /* 24px */
  color: var(--color-text-input-filled);             /* #343a3f */
  background-color: var(--color-surface-white);
  border: var(--border-width-sm) solid var(--color-border-input-default);  /* #b4bcc4 */
  border-radius: var(--radius-sm);                   /* 6px */
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Placeholder text */
input::placeholder,
.form-control::placeholder {
  color: var(--color-text-input-hint);               /* #68737e */
  opacity: 1;
}

/* Hover state */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
.form-control:hover {
  border-color: var(--color-border-input-hover);     /* #9ba6b1 */
}

/* Focus/Active state - Figma: border #089bee, focus ring */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
.form-control:focus {
  outline: none;
  border-color: var(--color-border-input-active);    /* #089bee */
  box-shadow: 0 0 0 3px rgba(8, 155, 238, 0.15);
}

/* Disabled state */
input:disabled,
.form-control:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-surface-neutral);
}

/* Input with icon (left) */
.input-icon-left {
  position: relative;
}

.input-icon-left input {
  padding-left: var(--space-11);                     /* 44px - room for icon */
}

.input-icon-left svg,
.input-icon-left .input-icon {
  position: absolute;
  left: var(--space-4);                              /* 16px */
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-icon-input);                    /* #4e565e */
}

/* ============================================================================
   7. TAGS & BADGES (CHIPS)
   Inline labels and status indicators
   Figma: padding 2px 6px, border-radius 4px, font Inter Regular 12px, letter-spacing 0.12px
   ============================================================================ */

/* Light tag/chip variant - Figma: bg #ceebfc, text #067cbe */
.tag,
.tag-light,
.chip,
.chip-light {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);                               /* 4px - for icon spacing */
  padding: 2px 6px;                                  /* Figma: 2px 6px */
  font-family: var(--font-family-body);
  font-size: var(--font-size-caption);               /* 12px */
  font-weight: var(--font-weight-regular);           /* 400 */
  line-height: var(--line-height-caption);           /* 20px */
  letter-spacing: var(--letter-spacing-wide-1);      /* 0.12px - Figma spec */
  color: var(--color-text-primary);                  /* #067cbe */
  background-color: var(--color-surface-tag-light);  /* #ceebfc */
  border-radius: var(--radius-xs);                   /* 4px - Figma spec */
}

/* Dark tag/chip variant - Figma: bg #067cbe, text white */
.tag-dark,
.chip-dark {
  color: var(--color-text-on-color-paragraph);       /* white */
  background-color: var(--color-surface-tag-dark);   /* #067cbe */
}

/* Icon inside tag/chip - Figma: 14px */
.tag svg,
.tag-light svg,
.tag-dark svg,
.chip svg,
.chip-light svg,
.chip-dark svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ============================================================================
   7. NOTIFICATIONS
   Alert banners and notification messages
   Figma: bg #e6f5fd, padding 16px, radius 8px, icon 20px stroke #089bee
   ============================================================================ */

.notification,
.alert-info {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);                               /* 16px */
  padding: var(--space-4);                           /* 16px */
  background-color: var(--color-surface-primary);    /* #e6f5fd */
  border-radius: var(--radius-md);                   /* 8px */
  max-width: 920px;
}

/* Notification icon */
.notification svg,
.alert-info svg,
.notification-icon {
  width: 20px;
  height: 20px;
  color: var(--color-icon-primary-default);          /* #089bee */
  stroke: var(--color-icon-primary-default);
  flex-shrink: 0;
  margin-top: 2px;                                   /* Align with text */
}

/* Notification text */
.notification-content,
.notification p,
.alert-info p {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);                    /* 14px */
  font-weight: var(--font-weight-regular);           /* 400 */
  line-height: var(--line-height-sm);                /* 24px */
  color: var(--color-text-paragraph);                /* #1a1d1f */
  margin: 0;
}

/* ============================================================================
   END OF COMPONENTS
   ============================================================================ */

/**
 * ============================================================================
 * STRIIM DOCUMENTATION DESIGN SYSTEM - PALIGO OVERRIDES
 * ============================================================================
 *
 * Paligo-specific fixes, overrides, and customizations.
 * This file contains all CSS that targets Paligo's generated HTML structure.
 *
 * SECTIONS:
 *   0. Typography Overrides (headings, paragraphs, links)
 *   1. Toolbar & Header
 *   2. Breadcrumbs
 *   3. Left-hand Navigation (Site Sidebar)
 *   4. Right-hand Navigation (Section TOC)
 *   5. Version Selector Dropdown
 *   6. Tables
 *   7. Code Blocks
 *   8. Callouts/Admonitions
 *   9. Footer
 *   10. Miscellaneous Fixes
 * ============================================================================
 */

/* ============================================================================
   0. TYPOGRAPHY OVERRIDES
   Paligo-specific heading, paragraph, and link styling
   ============================================================================ */

/* Primary color for buttons, portal header, titles */
.text-primary,
.btn-primary .badge,
.btn-link,
.pagination > li > a,
.pagination > li > span,
.nav-site-sidebar .active > a,
.portal-single-publication .publication-icon i,
.portal-single-publication .publication-icon .fa,
.publication-contents a:hover,
.publication-contents h4 a {
  color: var(--color-button-primary-default);
  font-family: var(--font-family-heading);
  font-style: normal;
}

/* Links */
a {
  font-family: var(--font-family-body);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-link-default);
}

a:hover {
  color: var(--color-text-link-hover);
}

a:active {
  color: var(--color-text-link-pressed);
}

/* Site content paragraphs */
.site-content p {
  font-family: var(--font-family-body) !important;
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  letter-spacing: 0;
  color: var(--color-text-paragraph);
  padding: 0;
  margin: 0 0 var(--space-4);
  max-width: 920px;
}

/* Section font family */
.section,
.breadcrumb-node,
.abstract-title,
.date-modified-text,
.formatted-date {
  font-family: var(--font-family-heading);
}

/* Titlepage headings */
.titlepage h1.title,
.titlepage h2.title,
.titlepage h3.title,
.titlepage h4.title,
.titlepage h5.title,
.titlepage h6.title {
  margin-top: var(--space-12);
  margin-bottom: var(--space-6);
  color: var(--color-text-heading);
  font-weight: var(--font-weight-bold);
  font-style: normal;
}

/* H1-H6 with !important to override Paligo defaults */
h1 {
  font-family: var(--font-family-heading) !important;
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-tight-3);
  font-weight: var(--font-weight-bold);
}

h2 {
  font-family: var(--font-family-heading) !important;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-tight-2);
  font-weight: var(--font-weight-bold);
}

h3 {
  font-family: var(--font-family-heading) !important;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-tight-1);
  font-weight: var(--font-weight-bold);
}

h4 {
  font-family: var(--font-family-heading) !important;
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: 0;
  font-weight: var(--font-weight-bold);
}

h5 {
  text-transform: capitalize;
  font-family: var(--font-family-body);
  font-size: 18px;
  line-height: 22px;
}

h6 {
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 20px;
}

/* Main content lists */
main ol, main ul {
  font-family: var(--font-family-body);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-paragraph);
  margin: 0;
}

/* Section spacing fix */
.section {
  padding: 5px 0;
}

/* Main content area positioning */
.page-toc main article {
  position: relative;
  top: 10px;
  padding-left: 4% !important;
  padding-right: 4%;
  width: 82%;
}

/* ============================================================================
   1. TOOLBAR & HEADER
   Main toolbar and sidebar header styling
   ============================================================================ */

.toolbar.top-nav-on {
  position: sticky;
  height: 121px;
  opacity: 1;
  background: var(--color-surface-dark);
  box-shadow: none;
  -webkit-box-shadow: none;
  padding: 0 !important;
}

.toolbar > * {
  color: #000000;
}

.bg-primary,
.btn-primary,
.publications-condensed .portal-single-publication a,
.toolbar,
.pager li > a:hover,
.pager li > span:hover {
  background-color: #252525;
}

.btn-primary,
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus,
.colored-top .site-sidebar-header {
  border-color: #252525;
}

/* Toolbar tools container - search and version selector */
.toolbar-tools {
  position: absolute;
  top: 13%;
  right: 0;
  width: 100%;
}

.toolbar-tools .tool-search .tool-search-form {
  border-color: #666;
}

.toolbar-tools .tool-search .tool-search-form input {
  color: #444;
  background-color: #fff;
  border: 1px solid #bbb;
  border-radius: var(--radius-md);
}

.toolbar-tools .tool-search .tool-search-form ::placeholder {
  color: #aaa;
  opacity: 1;
}

.tool-search {
  margin-left: 5px;
  padding-top: 7px;
}

.tool-search-form {
  margin: 0 auto !important;
  width: 85%;
}

.tool-search-form .search-field {
  position: absolute;
  box-sizing: border-box;
  margin: 0 auto;
  top: 1px;
  width: 82%;
  height: 32px;
  font-size: 13px;
  padding: 3px;
  line-height: 15px;
}

.fa-search {
  color: #ffffff;
}

/* Sidebar header */
.site-sidebar .site-sidebar-header {
  height: 64px;
  background: var(--color-surface-dark);
  filter: drop-shadow(0px 2px 8px rgba(252, 252, 252, 0.15));
}

.site-sidebar .logo {
  padding: 10px 0;
}

.theme2 .site-sidebar-header {
  padding: 5px;
}

/* ============================================================================
   2. BREADCRUMBS
   Toolbar navigation breadcrumb bar
   Using original Paligo values - reskin with design tokens later
   ============================================================================ */

.toolbar.top-nav-on .breadcrumb-container {
  position: absolute;
  width: 100%;
  height: 57px;
  background-color: #fff;
  margin-left: 0% !important;
  padding: 16px 32px 16px 48px;
  bottom: 0px;
}

.breadcrumb .breadcrumb-link a {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: #30A9EE;
}

.breadcrumb-node {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: #6e7d8c;
}

/* ============================================================================
   2. VERSION SELECTOR DROPDOWN
   Dropdown menu for switching documentation versions
   ============================================================================ */

/* Version dropdown button */
.version-dropdown {
  float: right;
  border-color: var(--color-icon-primary-default);
  background: transparent;
  color: var(--color-text-on-color-paragraph);
  border-radius: var(--radius-md);
  opacity: 1;
}

/* Navbar collapse - contains the version selector */
.navbar-collapse {
  margin-right: var(--space-4) !important;
  padding: 1px;
  float: right;
}

/* Mobile toggle button */
.navbar-toggle {
  float: right;
  margin-top: 18px;
}

/* Version selector dropdown button */
.sm-simple a.has-submenu,
.sm-simple a.has-submenu:hover,
.sm-simple a.has-submenu:focus,
.sm-simple a.has-submenu:active {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  line-height: 1em;
  letter-spacing: var(--letter-spacing-wide-1);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-sm) solid var(--color-icon-primary-default);
  border-radius: var(--radius-md);
  background: transparent;
  background-color: rgba(8, 155, 238, 0.15);
}

/* Version dropdown list container */
.sm-simple ul {
  border: 1px solid rgba(0, 0, 0, 0.02);
  border-radius: var(--radius-md);
  box-shadow:
    0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.07),
    0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.05),
    0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.04),
    0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.04);
  line-height: 0.85em;
  margin-left: -167px !important;
}

/* Version list items */
.sm-simple ul li a {
  border: 1px solid rgba(0, 0, 0, 0.02);
  line-height: 0.85em;
}

/* First dropdown item - rounded top corners */
.sm-simple > li > ul > li:first-child a:hover,
.sm-simple > li > ul > li:first-child a:focus,
.sm-simple > li > ul > li:first-child a:active {
  border-top: 1px solid rgba(0, 0, 0, 0.02);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  line-height: 0.85em;
}

/* Last dropdown item - rounded bottom corners */
.sm-simple > li > ul > li:last-child a:hover,
.sm-simple > li > ul > li:last-child a:focus,
.sm-simple > li > ul > li:last-child a:active {
  border-bottom: 1px solid rgba(0, 0, 0, 0.02);
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  line-height: 0.85em;
}

/* Version selector button styling */
.versionselector .btn {
  padding: 0 20px;
}

.versionselector .btn .caret {
  margin-left: 5px;
}

.versionselector .btn-primary:hover,
.versionselector .btn-primary:active,
.versionselector .btn-primary:focus {
  background-color: transparent !important;
  border-color: transparent !important;
  background-color: #fefeff;
}

/* ============================================================================
   4. LEFT-HAND NAVIGATION (Site Sidebar)
   ============================================================================ */

/* Active navigation item */
.nav-site-sidebar .active > a:focus,
.nav-site-sidebar .active > a {
  font-family: var(--font-family-body);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  line-height: 20px;
  color: #ffffff;
  background-color: var(--color-button-primary-default);
}

.nav-site-sidebar .active > a:hover {
  font-family: var(--font-family-body);
  font-style: normal;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  line-height: 20px;
  color: #ffffff;
  background-color: var(--color-button-primary-default);
}

/* Regular navigation items */
.nav-site-sidebar > li > a,
.nav-site-sidebar > li > a:hover {
  font-family: var(--font-family-body);
  font-style: normal;
  font-weight: var(--font-weight-regular) !important;
  font-size: var(--font-size-sm);
  line-height: 20px;
  color: var(--color-text-paragraph);
  background-color: var(--color-surface-sidebar);
}

/* Nested navigation links */
.nav-site-sidebar ul a {
  font-family: var(--font-family-body);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  line-height: 20px;
  color: var(--color-text-paragraph);
  background-color: var(--color-surface-sidebar);
}

/* Remove default list styling */
.nav-site-sidebar ul {
  list-style: none;
  padding-left: 0;
}

/* Icon alignment */
.nav-site-sidebar .glyphicon {
  margin-right: var(--space-2);
}

/* TOC expand/collapse icons */
.toc .glyphicon:before {
  content: "\e259";
}

.toc .opened > .topic-link > .glyphicon:before {
  content: "\e260";
}

/* ============================================================================
   5. RIGHT-HAND NAVIGATION (Section TOC)
   ============================================================================ */

/* Section nav container positioning */
.page-toc .section-nav-container {
  width: 17.6%;
  right: 0;
  top: 101px;
}

/* First item (page title) styling */
.section-nav.nav > li:first-child a {
  font-family: var(--font-family-heading) !important;
  font-style: normal !important;
  font-weight: var(--font-weight-bold) !important;
  font-size: var(--font-size-base) !important;
  line-height: 24px !important;
  color: var(--color-text-heading) !important;
}

/* Active first item */
.section-nav.nav > li:first-child.active a {
  font-family: var(--font-family-heading) !important;
  font-style: normal !important;
  font-weight: var(--font-weight-bold) !important;
  font-size: var(--font-size-base) !important;
  line-height: 24px !important;
  color: var(--color-button-primary-default) !important;
}

/* Active section nav item */
.section-nav.nav > li.active > a {
  font-family: var(--font-family-body) !important;
  font-style: normal !important;
  font-weight: var(--font-weight-semibold) !important;
  font-size: var(--font-size-caption) !important;
  line-height: 20px !important;
  letter-spacing: 0.01em !important;
  color: var(--color-button-primary-default) !important;
}

/* Regular section nav items */
.section-nav.nav > li a {
  font-family: var(--font-family-body) !important;
  font-style: normal !important;
  font-weight: var(--font-weight-regular) !important;
  font-size: var(--font-size-caption) !important;
  line-height: 20px !important;
  letter-spacing: 0.01em !important;
  color: var(--color-text-caption) !important;
}

/* Active indicator - blue dot */
.section-nav.nav > li.active > a:before {
  content: ' ';
  background-color: var(--color-button-primary-default) !important;
  border-radius: 50%;
  left: -3px;
  top: 12px;
  position: absolute;
  width: 6px;
  height: 6px;
}

/* Active sub-item indicator */
.section-nav.nav > li > ul > li.active a:before {
  content: ' ';
  background-color: var(--color-button-primary-default) !important;
  border-radius: 75%;
  left: -3px;
  top: 12px;
  position: absolute;
  width: 5px;
  height: 5px;
}

/* Non-active sub-item indicator */
.section-nav.nav > li > ul > li a:before {
  content: ' ';
  background: var(--color-surface-sidebar);
}

/* Section TOC title styling */
.section-toc-title {
  font-family: var(--font-family-heading);
  font-style: normal;
  font-weight: var(--font-weight-bold) !important;
  font-size: var(--font-size-lg) !important;
  line-height: 28px;
  color: var(--color-text-heading);
}

/* Section TOC links */
.section-toc .topic-link {
  padding: 0;
  font-family: var(--font-family-body);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-button-primary-default);
}

/* ============================================================================
   6. TABLE OVERRIDES
   Paligo-specific table styling fixes
   ============================================================================ */

/* Remove Bootstrap's outer table border and rounded corners */
.table-bordered,
.informaltable {
  border: none;
  border-radius: 0;
}

/* Remove border and rounded corners from responsive table wrappers */
.table-responsive,
.table-responsive[data-pattern="priority-columns"] {
  border: none;
  border-radius: 0;
  margin-bottom: 0;
}

/* Remove rounded corners from table headers */
.table-bordered > thead > tr > th,
.informaltable th {
  border-radius: 0;
}

/* Table cell borders - Remove outer borders for cleaner look */
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
  border-top: none;
  border-bottom: var(--border-width-sm) solid var(--color-border-table-cell);
  border-right: none;
  border-left: none;
  vertical-align: top;
  padding: var(--space-4);
}

/* Table last row bottom border
   Paligo's rwd-table.min.css removes the bottom border on the last row.
   We override it here to always show the bottom border.
   Targets Paligo's table structure: .table-responsive > .informaltable.table-bordered */
.table-responsive > .table-bordered > tbody > tr:last-child > td,
.table-responsive > .table-bordered > tbody > tr:last-child > th {
  border-bottom: var(--border-width-sm) solid var(--color-border-table-cell) !important;
}

/* Sticky first column - Horizontal scroll support */
table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}

/* Bold header paragraphs */
.informaltable th p {
  font-weight: var(--font-weight-bold);
}

/* Nested lists in tables - Fix spacing */
.informaltable ul.itemizedlist ul.itemizedlist,
.table ul.itemizedlist ul.itemizedlist,
.informaltable ul.itemizedlist ul.itemizedlist ul.itemizedlist,
.table ul.itemizedlist ul.itemizedlist ul.itemizedlist {
  margin-top: -24px;
}

/* ============================================================================
   7. CODE BLOCK OVERRIDES
   ============================================================================ */

/* Inline code in content */
code.code {
  font-family: var(--font-family-mono);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-code-default);
  background-color: var(--color-surface-code);
}

/* Strong text utility class */
.strong {
  font-weight: var(--font-weight-bold);
}

/* Code block wrapper */
.paligocode-wrapper {
  max-width: 920px;
}

/* Copy-to-clipboard button in code samples */
.paligocode-wrapper .btn-primary {
  top: 5px !important;
  right: 5px !important;
  background: var(--color-surface-sidebar);
  color: var(--color-button-primary-default);
  border-color: var(--color-button-primary-default);
  border-radius: 25%;
}

/* Syntax highlighted code blocks */
.hljs {
  border: 1px solid var(--color-border-code);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  margin: 0 0 18px;
  padding: 6px 12px 12px 12px !important;
  background-color: var(--color-surface-sidebar) !important;
  max-width: 920px;
}

.hljs-keyword {
  color: #0092a7 !important;
}

.hljs-string {
  color: #ad7291 !important;
}

/* ============================================================================
   8. CALLOUT/ADMONITION OVERRIDES
   ============================================================================ */

/* Note callout */
.note {
  background-color: var(--color-surface-callout-note);
  border-color: var(--color-border-callout-note);
  margin: 9px 0;
  padding: 6px 18px 6px 65px;
  max-width: 920px;
}

.note > p {
  margin: 0 0 12px;
}

/* Callout headings */
.note h3,
.warning h3,
.caution h3,
.important h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  line-height: 30px;
  margin-bottom: 4px;
  color: var(--color-text-heading);
  font-weight: var(--font-weight-bold);
  font-style: normal;
}

/* Caution callout */
.caution {
  background-color: var(--color-surface-callout-caution);
  border-color: var(--color-border-callout-caution);
  margin: 9px 0;
  padding: 6px 18px 6px 65px;
  max-width: 920px;
}

.caution > p {
  margin: 0 0 12px;
}

/* Warning callout */
.warning {
  background-color: var(--color-surface-callout-warning);
  border-color: var(--color-border-callout-warning);
  margin: 9px 0;
  padding: 6px 18px 6px 65px;
  max-width: 920px;
}

.warning > p {
  margin: 0 0 12px;
}

/* ============================================================================
   9. FOOTER OVERRIDES
   ============================================================================ */

/* Footer container */
.theme2 .site-footer {
  padding-left: 0;
  padding-right: 0;
}

.portal-footer .inner,
.site-footer .inner {
  padding: 25px 15px;
}

/* Striim marketing footer */
#striim-footer {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  background: #00a7e5;
  padding-top: 20px;
  padding-bottom: 25px;
  color: #fff;
  text-align: center;
}

p.striim-demo-text {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: #fff;
  margin-top: 0;
  font-weight: bold;
  margin: 0;
  max-width: none;
}

#footer-schedule-demo {
  margin-right: 50px;
  border-radius: 0;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: bold;
  display: inline-block;
  transition: all ease 0.5s;
  cursor: pointer;
  text-decoration: none;
  margin-top: 20px;
  padding: 12px 45px;
  border: 2px solid #fff;
  background: #00a7e5;
  color: #fff;
}

#footer-download {
  border-radius: 0;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: bold;
  display: inline-block;
  transition: all ease 0.5s;
  cursor: pointer;
  text-decoration: none;
  margin-top: 20px;
  padding: 12px 45px;
  border: 2px solid #fff;
  background: #fff;
  color: #00a7e5;
}

/* ============================================================================
   10. MISCELLANEOUS FIXES
   ============================================================================ */

/* Suppress table filter widget - Paligo adds this by default */
.btn-toolbar {
  display: none;
}

/* Footer metadata styling - copyright, dates */
.copyright,
.date-modified-text,
.formatted-date {
  font-family: var(--font-family-body);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

/* Fixed toolbar padding fix - removes extra space below toolbar */
.fixed-toolbar .site-content {
  padding-top: 0;
}

/* Image/media object width constraint - keeps images within content area */
.mediaobject {
  max-width: 920px;
}

/* Hide marketing footer */
div#striim-footer {
  display: none;
}

/* Print styles - Hide unnecessary elements */
@media print {
  .toolbar,
  .site-sidebar,
  .section-nav-container,
  #striim-footer {
    display: none !important;
  }

  .page-toc main article {
    width: 100%;
    padding: 0;
  }
}

/* Move Next link to correct position */

@media (min-width: 1200px) {
  .page-toc .pager {
    width: 79%; /* Prevent "next" link overlap right-nav */
  }
}

/* This part is to align The links PREV - FEEDBACK - NEXT in the same line */
.pager {
  display: flex;
  padding: 0;
  align-items: center; /* Vertically centers items */
  justify-content: space-between; /* Spreads them across the container */
}

/* 1. Set the 'previous' link to the first position */
.pager li.previous {
  order: 1;
}

/* 2. Set the 'feedback-panel' container to the middle position */
.pager li:has(.feedback-panel) {
  order: 2;
  flex: 1; /* Optional: allows the middle to grow */
  text-align: center; /* Centers the feedback link text */
}

/* 3. Set the 'next' link to the last position */
.pager li.next {
  order: 3;
}

/* ============================================================================
   END OF PALIGO OVERRIDES
   ============================================================================ */