/* =================================================================
   JFrog Fly Documentation - Custom Styles
   Aligned with JFrog Fly Product Page (https://jfrog.com/fly/)
   Font: Open Sans (same as product page)
   ================================================================= */

/* Import Open Sans - the actual font used on jfrog.com/fly */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap');

/* ==================== CSS Variables - JFrog Fly Colors ==================== */
:root,
[data-r-theme-variant='zen-dark'] {
  /* JFrog Fly Brand Colors - from design tokens (libs/design-tokens/src/lib/tokens.less) */
  /* Default is Dark Mode */

  /* Base Colors */
  --fly-bg-primary: #121212; /* gray-0 */
  --fly-bg-secondary: #1c1c1c; /* gray-1 */
  --fly-text-primary: #ffffff; /* general-black */
  --fly-primary: #40be46; /* primary-6 */
  
  /* Relearn Theme Overrides - Dark Mode */
  --MAIN-BG-color: var(--fly-bg-primary);
  --MAIN-TEXT-color: var(--fly-text-primary);
  --PRIMARY-color: var(--fly-primary);
  --MAIN-LINK-color: var(--fly-primary);
  
  /* Sidebar Specific: Strictly matches body bg */
  --MENU-SECTIONS-BG-color: #121212; 
  --MENU-SECTIONS-ACTIVE-BG-color: #292929; /* gray-2 */
  --MENU-SEARCH-BG-color: #292929; /* gray-2 */
  --MENU-SEARCH-BOX-color: #292929; /* gray-2 */
  
  --fly-green: #40BE46;
  --fly-green-hover: #36a33c;
  --fly-green-light: rgba(64, 190, 70, 0.12);
  /* Darker green for light mode - better contrast on white */
  --fly-green-dark: #228028;
  --fly-green-dark-hover: #1A6620;
  --fly-blue: #3A86F9;  /* Product page H2 color */
  --fly-blue-light: #2563EB;  /* Darker blue for light mode */
  --fly-dark-bg: #121212;
  --fly-dark-surface: #000000;
  --fly-dark-elevated: #1E1E2D;
  --fly-border: #23232F;
  --fly-text-secondary: rgba(242, 247, 252, 0.85);
  --fly-text-muted: rgba(242, 247, 252, 0.5);

  --MAIN-font: 'Open Sans', sans-serif;
  --CODE-font: 'Roboto Mono', monospace;
}

/* Auto Mode - follows system preference */
[data-r-theme-variant='zen-auto'] {
  /* Light mode (system preference) */
  @media (prefers-color-scheme: light) {
    /* Gray scale from Fly web app tokens */
    --fly-bg-primary: #fafafa; /* gray-0 */
    --fly-bg-secondary: #ffffff; /* gray-1 */
    --fly-text-primary: #000000; /* general-black */
    --fly-primary: #40be46; /* primary-6 */
    --fly-border: #e9e9e9; /* gray-3 - light mode border */

    --MAIN-BG-color: var(--fly-bg-primary);
    --MAIN-TEXT-color: var(--fly-text-primary);
    --PRIMARY-color: var(--fly-primary);
    --MAIN-LINK-color: var(--fly-primary);
    --MENU-SECTIONS-BG-color: #fafafa;
    --MENU-SECTIONS-ACTIVE-BG-color: #f5f5f5; /* gray-2 - subtler active state */
    --MENU-SEARCH-BG-color: #f5f5f5; /* gray-2 */
    --MENU-SEARCH-BOX-color: #f5f5f5; /* gray-2 */
    
    /* Light mode text colors */
    --fly-text-muted: rgba(0, 0, 0, 0.5);
    --fly-text-secondary: rgba(0, 0, 0, 0.75);
    
    /* Specific light mode overrides */
    --fly-green: #228028; /* Darker green for better contrast */
    --fly-green-hover: #1A6620;
    --fly-blue: var(--fly-blue-light);
  }
  
  /* Dark mode (system preference) */
  @media (prefers-color-scheme: dark) {
    --fly-bg-primary: #121212; /* gray-0 */
    --fly-bg-secondary: #1c1c1c; /* gray-1 */
    --fly-text-primary: #ffffff; /* general-black */
    --fly-primary: #40be46; /* primary-6 */
  
    --MAIN-BG-color: var(--fly-bg-primary);
    --MAIN-TEXT-color: var(--fly-text-primary);
    --PRIMARY-color: var(--fly-primary);
    --MAIN-LINK-color: var(--fly-primary);
    
    --MENU-SECTIONS-BG-color: #121212; 
    --MENU-SECTIONS-ACTIVE-BG-color: #292929; /* gray-2 */
    --MENU-SEARCH-BG-color: #292929; /* gray-2 */
    --MENU-SEARCH-BOX-color: #292929; /* gray-2 */
    
    --fly-dark-bg: #121212;
    --fly-dark-surface: #000000;
    --fly-dark-elevated: #1E1E2D;
    --fly-border: #23232F;
    --fly-text-secondary: rgba(242, 247, 252, 0.85);
    --fly-text-muted: rgba(242, 247, 252, 0.5);
  }
}


[data-r-theme-variant='zen-light'] {
  /* Gray scale from Fly web app tokens (libs/design-tokens/src/lib/tokens.less) */
  --fly-bg-primary: #fafafa; /* gray-0 */
  --fly-bg-secondary: #ffffff; /* gray-1 */
  --fly-text-primary: #000000; /* general-black */
  --fly-primary: #40be46; /* primary-6 */
  --fly-border: #e9e9e9; /* gray-3 - light mode border */

  --MAIN-BG-color: var(--fly-bg-primary);
  --MAIN-TEXT-color: var(--fly-text-primary);
  --PRIMARY-color: var(--fly-primary);
  --MAIN-LINK-color: var(--fly-primary);
  --MENU-SECTIONS-BG-color: #fafafa;
  --MENU-SECTIONS-ACTIVE-BG-color: #f5f5f5; /* gray-2 - subtler active state */
  --MENU-SEARCH-BG-color: #f5f5f5; /* gray-2 */
  --MENU-SEARCH-BOX-color: #f5f5f5; /* gray-2 */
  
  /* Light mode text colors */
  --fly-text-muted: rgba(0, 0, 0, 0.5);
  --fly-text-secondary: rgba(0, 0, 0, 0.75);
  
  /* Light mode specific overrides */
  --fly-green: #228028; /* Darker green for better contrast on white */
  --fly-green-hover: #1A6620;
}

/* ==================== Typography - Open Sans ==================== */
body,
#R-body {
  font-family: var(--MAIN-font) !important;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--MAIN-TEXT-color);
  background-color: var(--MAIN-BG-color) !important;
}

/* Neutral Emphasis - No Green */
b, strong, em {
  color: var(--MAIN-TEXT-color) !important;
  font-weight: 700;
}

/* Content Container - Card Style */
#R-body-inner {
  font-family: var(--MAIN-font) !important;
  font-weight: 400;
  color: var(--MAIN-TEXT-color);
  
  /* Card Layout */
  background-color: var(--fly-bg-secondary);
  border-radius: 16px;
  padding: 2.5rem;
  margin: 1.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

/* Light mode: Softer card shadow to match Fly web app */
[data-r-theme-variant='zen-light'] #R-body-inner,
[data-r-theme-variant='zen-auto'] #R-body-inner {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05);
  border: 1px solid var(--fly-border);
}

@media (prefers-color-scheme: dark) {
  [data-r-theme-variant='zen-auto'] #R-body-inner {
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
    border: none;
  }
}

/* Headings - Neutral and Clean */
h1, h2, h3, h4, h5, h6,
#R-body-inner h1, #R-body-inner h2, #R-body-inner h3,
#R-body-inner h4, #R-body-inner h5, #R-body-inner h6 {
  font-family: var(--MAIN-font) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
  overflow: visible !important;
  height: auto !important;
  color: var(--MAIN-TEXT-color) !important; /* Force neutral color */
}

/* Page title - H1 */
#R-body-inner h1,
#R-main-content h1,
article h1,
.article h1 {
  font-size: 2.4rem !important;
  font-weight: 400 !important;
  margin-bottom: 1.25rem !important;
  color: var(--MAIN-TEXT-color) !important;
}

/* H2 - Neutral */
h2,
#R-body-inner h2 {
  font-size: 1.75rem !important;
  font-weight: 400 !important;
  margin-top: 2.5rem !important;
  margin-bottom: 0.75rem !important;
  letter-spacing: -0.02em !important;
  color: var(--MAIN-TEXT-color) !important; /* Changed from fly-blue */
  line-height: 1.4 !important;
}

/* H3 */
h3,
#R-body-inner h3 {
  font-size: 1.35rem !important;
  font-weight: 400 !important;
  margin-top: 1.75rem !important;
  color: var(--MAIN-TEXT-color) !important;
}

/* H4 */
h4,
#R-body-inner h4 {
  font-size: 1.15rem !important;
  font-weight: 500 !important;
  color: var(--MAIN-TEXT-color) !important;
}

/* Paragraphs */
p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

/* ==================== Sidebar Navigation ==================== */
#R-sidebar {
  font-family: var(--MAIN-font) !important;
  background-color: var(--MENU-SECTIONS-BG-color) !important; /* Use variable to support light mode */
  border-right: none !important;
}

/* Remove borders from all sidebar components */
#R-header-wrapper,
#R-homelinks,
#R-header-topbar,
#R-content-wrapper,
#R-content-wrapper > * {
  border-right: none !important;
  border-inline-end: none !important;
  border-inline-end-width: 0 !important;
}

#R-sidebar ul {
  background-color: transparent !important;
}

/* ==================== Collapsible Menu Chevron Icons ==================== */
/* Fix the chevron icon and add spacing */
#R-sidebar ul.collapsible-menu > li > label > .fa-chevron-right {
  /* Hide the broken Font Awesome icon text */
  font-size: 0 !important;
  width: 14px !important;
  height: 14px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-right: 6px !important; /* Space between chevron and text */
}

/* Create a CSS chevron using borders */
#R-sidebar ul.collapsible-menu > li > label > .fa-chevron-right::before {
  content: '' !important;
  display: block !important;
  width: 5px !important;
  height: 5px !important;
  border-right: 1.5px solid currentColor !important;
  border-bottom: 1.5px solid currentColor !important;
  transform: rotate(-45deg) !important;
  transition: transform 0.2s ease !important;
  opacity: 0.7;
  color: var(--fly-text-muted); /* Neutral icon color by default */
}

/* Rotate chevron when menu is open */
#R-sidebar ul.collapsible-menu > li > input:checked + label > .fa-chevron-right::before {
  transform: rotate(45deg) !important;
}

/* Hover state for menu labels */
#R-sidebar ul.collapsible-menu > li > label {
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

#R-sidebar ul.collapsible-menu > li > label:hover {
  opacity: 1;
}

#R-sidebar ul.collapsible-menu > li > label:hover > .fa-chevron-right::before {
  opacity: 1;
  color: var(--fly-primary); /* Green on hover */
  border-color: var(--fly-primary) !important;
}

/* Logo area */
a#R-logo {
  font-family: var(--MAIN-font) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  text-transform: none !important;
  letter-spacing: 0;
}

/* Home link styling */
#R-sidebar #R-homelinks ul > li > :is(a, span) {
  font-size: 0.95rem !important;
  line-height: 1.8rem !important;
  font-weight: 600 !important;
}

/* Override Home Link Icon specifically */
#R-sidebar #R-homelinks ul > li > a i,
#R-sidebar #R-homelinks ul > li > a svg {
  color: var(--fly-text-muted) !important;
  transition: color 0.15s ease;
}

#R-sidebar #R-homelinks ul > li > a:hover i,
#R-sidebar #R-homelinks ul > li > a:hover svg {
  color: var(--fly-primary) !important;
}

/* Navigation title */
#R-sidebar .nav-title {
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em;
  color: var(--fly-text-muted);
  margin-bottom: 0.5rem;
}

/* Menu items */
#R-sidebar ul.collapsible-menu > li > :is(a, span),
#R-sidebar ul.topics > li > :is(a, span) {
  font-weight: 400;
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem 0.4rem 1.5rem !important; /* Extra left padding for chevron */
  border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease;
  color: var(--MAIN-TEXT-color);
}

#R-sidebar ul.collapsible-menu > li > :is(a, span):hover,
#R-sidebar ul.topics > li > :is(a, span):hover {
  background: var(--MENU-SECTIONS-ACTIVE-BG-color);
}

/* Active menu item */
#R-sidebar ul.collapsible-menu > li.active > :is(a, span),
#R-sidebar ul.topics > li.active > :is(a, span) {
  font-weight: 600;
  color: var(--fly-primary);
}

/* ==================== Search Box ==================== */
#R-sidebar .searchbox {
  border-radius: 16px !important; /* --fly-number-radius-5 from design tokens */
  font-family: var(--MAIN-font) !important;
  background-color: var(--MENU-SEARCH-BG-color) !important;
  border: 1px solid var(--fly-border) !important;
  height: 36px;
  display: flex;
  align-items: center;
  position: relative;
  box-shadow: none !important;
}

#R-sidebar .searchbox input {
  font-family: var(--MAIN-font) !important;
  font-size: 0.875rem;
  background-color: transparent !important;
  color: var(--MAIN-TEXT-color);
  height: 36px;
  padding-left: 2rem !important;
  padding-right: 1.5rem !important;
}

#R-sidebar .searchbox input::placeholder {
  color: var(--fly-text-muted);
  opacity: 1;
}

#R-sidebar .searchbox input::-webkit-input-placeholder {
  color: var(--fly-text-muted);
  opacity: 1;
}

/* Search icon styling */
#R-sidebar .searchbox > :first-child {
  left: 0.625rem !important;
  top: 50% !important;
  transform: translateY(-50%);
  color: var(--fly-text-muted) !important;
  opacity: 1;
  font-size: 14px;
}

/* Clear button styling */
#R-sidebar .searchbox > :last-child {
  right: 0.625rem !important;
  top: 50% !important;
  transform: translateY(-50%);
  color: var(--fly-text-muted) !important;
  opacity: 0.6;
}

#R-sidebar .searchbox > :last-child:hover {
  opacity: 1;
  color: var(--fly-primary) !important;
}

/* Light mode search box - matches Fly web app */
[data-r-theme-variant='zen-light'] #R-sidebar .searchbox {
  background-color: #ffffff !important; /* Pure white like web app */
  border: 1px solid #e9e9e9 !important; /* gray-3 */
}

@media (prefers-color-scheme: light) {
  [data-r-theme-variant='zen-auto'] #R-sidebar .searchbox {
    background-color: #ffffff !important;
    border: 1px solid #e9e9e9 !important;
  }
}

/* ==================== Code Blocks ==================== */
pre {
  border-radius: 6px !important;
  border: 1px solid var(--CODE-BLOCK-BORDER-color) !important;
  font-size: 0.875rem;
}

code {
  font-family: var(--CODE-font) !important;
  font-size: 0.9em !important;
}

/* Inline code */
:not(pre) > code {
  border-radius: 3px !important;
  padding: 0.15em 0.35em !important;
  font-weight: 500;
}

/* Light mode inline code styling */
[data-r-theme-variant='zen-light'] :not(pre) > code {
  background-color: #f5f5f5; /* gray-2 */
  border: 1px solid #e9e9e9; /* gray-3 */
}

@media (prefers-color-scheme: light) {
  [data-r-theme-variant='zen-auto'] :not(pre) > code {
    background-color: #f5f5f5; /* gray-2 */
    border: 1px solid #e9e9e9; /* gray-3 */
  }
}

/* ==================== Buttons ==================== */
.btn,
button,
input[type="submit"] {
  font-family: var(--MAIN-font) !important;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.15s ease;
}

/* Primary button - JFrog green CTA style */
.btn-primary,
a.highlight {
  background: var(--fly-primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 0.6rem 1.25rem;
  font-weight: 600;
}

.btn-primary:hover,
a.highlight:hover {
  background: var(--fly-green-hover) !important;
}

/* ==================== Links ==================== */
#R-body-inner a {
  text-decoration: none;
  transition: color 0.15s ease;
  color: var(--MAIN-LINK-color);
}

#R-body-inner a:hover {
  text-decoration: underline;
}

/* ==================== Tables ==================== */
table {
  border-radius: 6px !important;
  overflow: hidden;
  border-collapse: separate !important;
  border-spacing: 0;
  font-size: 0.9rem;
  border: 1px solid var(--fly-border);
}

th {
  font-weight: 600 !important;
  text-transform: none !important;
  background: var(--CODE-BLOCK-BG-color);
  color: var(--MAIN-TEXT-color);
}

td, th {
  padding: 0.75rem 1rem !important;
  border-color: var(--fly-border);
}

/* Light mode table styling */
[data-r-theme-variant='zen-light'] table,
[data-r-theme-variant='zen-auto'] table {
  border-color: #e9e9e9;
}

[data-r-theme-variant='zen-light'] th {
  background: #f5f5f5; /* gray-2 */
}

@media (prefers-color-scheme: light) {
  [data-r-theme-variant='zen-auto'] th {
    background: #f5f5f5; /* gray-2 */
  }
}

@media (prefers-color-scheme: dark) {
  [data-r-theme-variant='zen-auto'] table {
    border-color: #23232F;
  }
}

/* ==================== Alert/Notice Boxes ==================== */
.box,
.notice,
.tip,
.warning,
.info {
  border-radius: 6px !important;
  border-left-width: 4px !important;
  font-size: 0.95rem;
}

/* ==================== Lists ==================== */
ul, ol {
  line-height: 1.7;
}

li {
  margin-bottom: 0.3rem;
}

/* ==================== Breadcrumbs ==================== */
#R-main-breadcrumbs {
  font-size: 0.85rem;
  font-weight: 400;
}

#R-main-breadcrumbs a {
  color: var(--fly-text-muted);
  transition: color 0.15s ease;
}

#R-main-breadcrumbs a:hover {
  color: var(--fly-primary);
}

/* ==================== TOC (Table of Contents) ==================== */
#R-TableOfContents {
  font-size: 0.85rem;
}

#R-TableOfContents a {
  color: var(--fly-text-muted);
  transition: color 0.15s ease;
  padding: 0.2rem 0;
  display: block;
}

#R-TableOfContents a:hover,
#R-TableOfContents a.active {
  color: var(--fly-primary);
}

/* ==================== Copy Button ==================== */
.copy-to-clipboard-button {
  border-radius: 4px !important;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.copy-to-clipboard-button:hover {
  opacity: 1;
}

/* ==================== Scrollbar ==================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--MENU-SECTIONS-BG-color);
}

::-webkit-scrollbar-thumb {
  background: var(--fly-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3A4458;
}

/* Light mode scrollbar - matches Fly web app */
[data-r-theme-variant='zen-light'] ::-webkit-scrollbar-track {
  background: #fafafa;
}

[data-r-theme-variant='zen-light'] ::-webkit-scrollbar-thumb {
  background: #cccccc; /* gray-4 */
}

[data-r-theme-variant='zen-light'] ::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Auto mode light scrollbar */
@media (prefers-color-scheme: light) {
  [data-r-theme-variant='zen-auto'] ::-webkit-scrollbar-track {
    background: #fafafa;
  }

  [data-r-theme-variant='zen-auto'] ::-webkit-scrollbar-thumb {
    background: #cccccc; /* gray-4 */
  }

  [data-r-theme-variant='zen-auto'] ::-webkit-scrollbar-thumb:hover {
    background: #999999;
  }
}


/* H2 uses neutral color in both light and dark modes */

/* ==================== Mobile Responsiveness ==================== */
@media (max-width: 768px) {
  body,
  #R-body,
  #R-body-inner {
    font-size: 14px;
    margin: 0 !important; /* Reset margin on mobile */
    border-radius: 0 !important; /* Reset radius on mobile */
    padding: 1.5rem !important;
  }

  #R-body-inner h1 {
    font-size: 1.75rem !important;
  }

  h2,
  #R-body-inner h2 {
    font-size: 1.5rem !important;
  }

  h3,
  #R-body-inner h3 {
    font-size: 1.2rem !important;
  }
}

/* ==================== Header / Topbar Alignment ==================== */
/* Match frontend monorepo style: Transparent bg, no border, 56px height */
#R-topbar {
  background-color: var(--MAIN-BG-color) !important; /* Ensure it matches body */
  border-bottom: none !important;
  min-height: 56px !important;
}

#R-topbar > .topbar-wrapper {
  background-color: transparent !important; /* Remove the light overlay */
}

/* Align buttons vertically if height increased */
.topbar-button {
  display: inline-flex !important;
  align-items: center;
  height: 100%;
}

/* ==================== Footer Styling ==================== */
/* Remove dark rectangle background from footer area */
#R-body-inner > .footline,
#R-body-inner > hr + p,
#R-body-inner > p + div {
  background: transparent;
}

/* Style footer table to blend with background */
#R-body-inner table[style*="margin: 0 auto"] {
  background-color: var(--fly-bg-secondary) !important;
  border-radius: 12px;
  padding: 1rem;
}