/* Fastish Documentation Theme - Aligned with Portal UI */

/* Import Chelsea Market font for headers */
@import url('https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap');

:root {
  /* Typography - Match portal fonts */
  --base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  --code-font-family: "SF Mono", ui-monospace, "JetBrains Mono", "Cascadia Code", monospace;
  --heading-font-family: "Chelsea Market", cursive;

  /* Font sizes for headings */
  --heading-h1-font-size: 2.5rem;
  --heading-h2-font-size: 2rem;
  --heading-h3-font-size: 1.5rem;
  --heading-h4-font-size: 1.25rem;
  --heading-h5-font-size: 1.125rem;
  --heading-h6-font-size: 1rem;

  /* Spacing & Borders - Match portal radius */
  --border-radius-s: 0.375rem;
  --border-radius-m: 0.5rem;
  --border-radius-l: 0.75rem;

  /* Dark theme as default - Softer contrast */
  --theme-color: hsl(174 62% 67%);
  --base-background-color: hsl(222 47% 6%);
  --base-color: hsl(220 9% 80%);

  /* Sidebar - Dark theme */
  --sidebar-background: hsl(222 47% 8%);
  --sidebar-border-color: hsl(222 47% 12%);
  --sidebar-nav-link-color: hsl(220 9% 70%);
  --sidebar-nav-link-color--active: hsl(220 9% 92%);
  --sidebar-nav-link-background-color--active: hsl(222 47% 12%);
  --sidebar-nav-link-border-color--active: hsl(174 62% 67%);

  /* Content */
  --content-max-width: 60rem;
  --heading-color: hsl(174 62% 67%);
  --heading-font-weight: 600;

  /* Code blocks - Dark theme */
  --code-inline-background: hsl(222 47% 10%);
  --code-inline-color: hsl(220 9% 80%);
  --code-inline-border-radius: 0.375rem;
  --code-block-background: hsl(222 47% 10%);
  --code-block-border-radius: 0.75rem;
  --code-block-padding: 1.5rem;
  --code-theme-background: hsl(222 47% 8%);

  /* Links - Dark theme */
  --link-color: hsl(174 62% 67%);
  --link-text-decoration: none;
  --link-text-decoration--hover: underline;

  /* Navbar - Dark theme */
  --navbar-root-background: hsl(222 47% 8%);
  --navbar-root-border-color: hsl(222 47% 15%);

  /* Cover page - Dark theme */
  --cover-background-color: hsl(222 47% 6%);
  --cover-heading-color: hsl(220 9% 92%);

  /* Tables - Dark theme */
  --table-head-background: hsl(222 47% 15%);
  --table-row-border-color: hsl(222 47% 18%);
  --table-cell-border-color: hsl(222 47% 18%);
  --table-body-background: hsl(222 47% 8%);
  --table-row-background-alt: hsl(222 47% 10%);

  /* Blockquotes - Dark theme */
  --blockquote-border-color: hsl(174 62% 67%);
  --blockquote-background: hsl(222 47% 12%);

  /* Notice/Alert - Dark theme */
  --notice-background: hsl(222 47% 12%);
  --notice-border-color: hsl(220 9% 92%);

  /* Strong/emphasis */
  --strong-color: hsl(174 62% 67%);

  /* Transitions - Match portal timing */
  --duration: 200ms;
}

/* Light mode override */
.light {
  --theme-color: hsl(222 47% 11%);
  --base-background-color: hsl(0 0% 100%);
  --base-color: hsl(222 47% 11%);

  /* Sidebar */
  --sidebar-background: hsl(0 0% 100%);
  --sidebar-border-color: hsl(214 32% 91%);
  --sidebar-nav-link-color: hsl(222 47% 35%);
  --sidebar-nav-link-color--active: hsl(222 47% 11%);
  --sidebar-nav-link-background-color--active: hsl(210 40% 96%);
  --sidebar-nav-link-border-color--active: hsl(174 62% 37%);

  /* Content */
  --heading-color: hsl(174 62% 35%);

  /* Code blocks - darker with better contrast, but lighter than dark mode */
  --code-inline-background: hsl(222 47% 95%);
  --code-inline-color: hsl(222 47% 20%);
  --code-block-background: hsl(222 47% 20%);
  --code-theme-background: hsl(222 47% 18%);

  /* Links */
  --link-color: hsl(174 62% 37%);

  /* Navbar */
  --navbar-root-background: hsl(0 0% 100%);
  --navbar-root-border-color: hsl(214 32% 91%);

  /* Cover page */
  --cover-background-color: hsl(0 0% 100%);
  --cover-heading-color: hsl(222 47% 11%);

  /* Tables */
  --table-head-background: hsl(222 47% 95%);
  --table-row-border-color: hsl(214 32% 88%);
  --table-cell-border-color: hsl(214 32% 88%);
  --table-body-background: hsl(0 0% 100%);
  --table-row-background-alt: hsl(222 47% 98%);

  /* Blockquotes */
  --blockquote-border-color: hsl(174 62% 37%);
  --blockquote-background: hsl(222 47% 96%);

  /* Notice/Alert */
  --notice-background: hsl(210 40% 96%);
  --notice-border-color: hsl(222 47% 11%);

  /* Strong/emphasis */
  --strong-color: hsl(174 62% 35%);
}

/* Custom enhancements */

/* Wider sidebar */
:root {
  --sidebar-width: 360px;
}

.sidebar {
  width: var(--sidebar-width) !important;
}

@media screen and (min-width: 769px) {
  .sidebar {
    width: var(--sidebar-width) !important;
  }

  .content {
    left: var(--sidebar-width) !important;
  }

  body.close .sidebar {
    transform: translateX(calc(-1 * var(--sidebar-width))) !important;
  }

  body.close .content {
    left: 0 !important;
  }
}

/* Smooth font rendering - Match portal */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1, "ss02" 1;
  line-height: 1.6;
  letter-spacing: -0.011em;
}

/* Headings with Chelsea Market font */
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section h6,
.cover-main > h1,
.sidebar > h1 {
  font-family: var(--heading-font-family);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.markdown-section h1 {
  font-size: var(--heading-h1-font-size);
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

.markdown-section h2 {
  font-size: var(--heading-h2-font-size);
  margin-top: 1.75rem;
  margin-bottom: 1.25rem;
}

.markdown-section h3 {
  font-size: var(--heading-h3-font-size);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.markdown-section h4 {
  font-size: var(--heading-h4-font-size);
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
}

.markdown-section h5 {
  font-size: var(--heading-h5-font-size);
}

.markdown-section h6 {
  font-size: var(--heading-h6-font-size);
}

/* Cover page heading */
.cover-main > h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

/* Sidebar active state - removed highlighting */
.sidebar-nav li.active > a {
  /* No special styling for active items */
}

/* Sidebar section headers (Getting Started, Workflow, etc) - transparent background */
.sidebar-nav > ul > li > p,
.sidebar-nav > ul > li > p > a {
  background-color: transparent !important;
  background: transparent !important;
  border-left: none !important;
  font-weight: 600;
  font-family: var(--heading-font-family);
  font-size: 1.1rem;
  color: var(--heading-color);
  padding-left: 0 !important;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.sidebar-nav > ul > li:first-child > p {
  margin-top: 0;
}

/* Ensure no background on section header links when hovered */
.sidebar-nav > ul > li > p:hover,
.sidebar-nav > ul > li > p > a:hover {
  background-color: transparent !important;
  background: transparent !important;
}

/* Replace arrow icon with plus/minus */
.sidebar-nav .folder::before {
  content: "+" !important;
  font-size: 1em;
  margin-right: 0.5rem;
  transition: all 0.2s ease;
  display: inline-block;
  font-weight: 400;
  color: var(--sidebar-nav-link-color);
}

.sidebar-nav .folder.open::before {
  content: "−" !important;
}

/* Navbar Home link - match other navbar items with transparent background */
.app-nav a {
  color: var(--sidebar-nav-link-color) !important;
  background: transparent !important;
  background-color: transparent !important;
}

.app-nav a:hover {
  color: var(--sidebar-nav-link-color--active) !important;
  background: transparent !important;
  background-color: transparent !important;
}

.app-nav li {
  background: transparent !important;
  background-color: transparent !important;
}

/* Code blocks with better styling */
.markdown-section pre {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  background: var(--code-theme-background) !important;
  border: 1px solid var(--sidebar-border-color);
}

.markdown-section pre > code {
  background: var(--code-theme-background) !important;
  color: var(--base-color);
  padding: 0;
  font-size: 0.9em;
  line-height: 1.6;
}

.markdown-section code {
  padding: 0.125rem 0.375rem;
  font-size: 0.875em;
  font-family: var(--code-font-family);
}

.markdown-section p > code,
.markdown-section li > code,
.markdown-section table code {
  background: var(--code-inline-background);
  color: var(--code-inline-color);
  border: 1px solid var(--sidebar-border-color);
}

/* Syntax highlighting improvements - Dark theme */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: hsl(220 9% 55%);
}

.token.punctuation {
  color: hsl(220 9% 75%);
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: hsl(0 85% 70%);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: hsl(142 69% 65%);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: hsl(174 62% 67%);
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: hsl(207 82% 66%);
}

.token.function,
.token.class-name {
  color: hsl(38 92% 65%);
}

.token.regex,
.token.important,
.token.variable {
  color: hsl(174 62% 67%);
}

/* Light mode syntax highlighting overrides */
.light .token.comment,
.light .token.prolog,
.light .token.doctype,
.light .token.cdata {
  color: hsl(220 9% 60%);
}

.light .token.punctuation {
  color: hsl(220 9% 75%);
}

.light .token.property,
.light .token.tag,
.light .token.boolean,
.light .token.number,
.light .token.constant,
.light .token.symbol,
.light .token.deleted {
  color: hsl(0 85% 65%);
}

.light .token.selector,
.light .token.attr-name,
.light .token.string,
.light .token.char,
.light .token.builtin,
.light .token.inserted {
  color: hsl(142 69% 60%);
}

.light .token.operator,
.light .token.entity,
.light .token.url,
.light .language-css .token.string,
.light .style .token.string {
  color: hsl(174 62% 60%);
}

.light .token.atrule,
.light .token.attr-value,
.light .token.keyword {
  color: hsl(207 82% 60%);
}

.light .token.function,
.light .token.class-name {
  color: hsl(38 92% 60%);
}

.light .token.regex,
.light .token.important,
.light .token.variable {
  color: hsl(174 62% 60%);
}

/* Light mode code block text color - brighter for lighter background */
.light .markdown-section pre > code {
  color: hsl(220 9% 88%);
}

/* Enhanced tables */
.markdown-section table {
  border-radius: var(--border-radius-m);
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  border-collapse: collapse;
}

.markdown-section table th {
  font-weight: 600;
  text-align: left;
  background-color: var(--table-head-background);
  padding: 0.75rem 1rem;
}

.markdown-section table td {
  padding: 0.75rem 1rem;
  background-color: var(--table-body-background);
  border: 1px solid var(--table-cell-border-color);
}

.markdown-section table tbody tr:nth-child(even) td {
  background-color: var(--table-row-background-alt);
}

/* Better contrast for text in table cells */
.markdown-section table td,
.markdown-section table th {
  color: var(--base-color);
}

/* Blockquote styling */
.markdown-section blockquote {
  border-left: 4px solid var(--blockquote-border-color);
  background: var(--blockquote-background);
  border-radius: var(--border-radius-m);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
}

/* Buttons/badges */
.markdown-section .task-list-item input[type="checkbox"] {
  accent-color: var(--theme-color);
}

/* Custom scrollbars - Match portal */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

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

::-webkit-scrollbar-thumb:hover {
  background: var(--theme-color);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-border-color) transparent;
}

/* Cover page enhancements */
.cover-main {
  padding: 4rem 2rem;
}

.cover-main > p:last-child a {
  background-color: hsl(174 62% 40%);
  color: hsl(222 47% 6%);
  padding: 0.75rem 2rem;
  border-radius: var(--border-radius-m);
  text-decoration: none;
  display: inline-block;
  transition: all var(--duration);
  font-weight: 600;
  font-family: var(--base-font-family);
  border: 2px solid hsl(174 62% 50%);
}

.cover-main > p:last-child a:hover {
  background-color: hsl(174 62% 50%);
  border-color: hsl(174 62% 60%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgb(0 0 0 / 0.3);
}

/* Search box */
.search input {
  border: 1px solid var(--sidebar-border-color);
  border-radius: var(--border-radius-m);
  padding: 0.625rem 1rem;
  background: var(--base-background-color);
  color: var(--base-color);
  transition: border-color var(--duration);
}

.search input:focus {
  border-color: var(--theme-color);
  outline: none;
}

/* Pagination - Previous/Next navigation */
.pagination-item {
  transition: all var(--duration);
}

.pagination-item a {
  background: none !important;
  background-color: transparent !important;
  border-radius: var(--border-radius-m);
  transition: all var(--duration);
}

.pagination-item a:hover {
  background: none !important;
  background-color: transparent !important;
}

/* All text in pagination - same styling across all elements */
.pagination-item-label,
.pagination-item-subtitle,
.pagination-item span,
.pagination-item p,
.pagination-item div {
  color: hsl(220 9% 60%) !important;
}

/* Title: "Requirements" - lighter and gets hover effect */
.pagination-item-title {
  color: hsl(220 9% 75%) !important;
  transition: color var(--duration);
}

/* Only title gets teal on hover */
.pagination-item a:hover .pagination-item-title {
  color: hsl(174 62% 67%) !important;
}

/* Light mode pagination - all text same */
.light .pagination-item-label,
.light .pagination-item-subtitle,
.light .pagination-item span,
.light .pagination-item p,
.light .pagination-item div {
  color: hsl(222 47% 45%) !important;
}

.light .pagination-item-title {
  color: hsl(222 47% 25%) !important;
}

.light .pagination-item a:hover .pagination-item-title {
  color: hsl(174 62% 35%) !important;
}

/* Copy code button */
.docsify-copy-code-button {
  background: var(--theme-color) !important;
  color: white !important;
  border-radius: var(--border-radius-s) !important;
  font-size: 0.75rem !important;
  padding: 0.375rem 0.75rem !important;
  opacity: 0.9;
}

.docsify-copy-code-button:hover {
  opacity: 1;
}

/* Tabs styling */
.docsify-tabs__tab {
  border-radius: var(--border-radius-s) var(--border-radius-s) 0 0;
  transition: background-color var(--duration);
}

.docsify-tabs__tab--active {
  background: var(--sidebar-nav-link-background-color--active);
  border-bottom-color: var(--theme-color);
}

/* Badge/shield styling */
img[alt*="badge"],
img[alt*="shield"] {
  display: inline-block;
  margin: 0.25rem;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .sidebar {
    background: var(--sidebar-background);
  }

  .sidebar-toggle {
    background: transparent;
    color: var(--base-color);
  }
}

/* Smooth theme transitions */
@media (prefers-reduced-motion: no-preference) {
  *,
  *::before,
  *::after {
    transition-property: color, background-color, border-color;
    transition-duration: var(--duration);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Selection styling - Match portal */
::selection {
  background-color: var(--theme-color);
  color: white;
}

/* Focus styles - Match portal */
:focus-visible {
  outline: 2px solid var(--theme-color);
  outline-offset: 2px;
  border-radius: var(--border-radius-s);
}

/* Theme toggle button */
.theme-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--sidebar-nav-link-background-color--active);
  border: 1px solid var(--sidebar-border-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
  transition: all var(--duration) cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px -2px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--base-color);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle .sun-icon {
  display: none;
}

.theme-toggle .moon-icon {
  display: block;
}

.light .theme-toggle .sun-icon {
  display: block;
}

.light .theme-toggle .moon-icon {
  display: none;
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
  .theme-toggle {
    bottom: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
  }

  .theme-toggle svg {
    width: 1rem;
    height: 1rem;
  }
}

/* Strong/bold text with accent color */
.markdown-section strong {
  color: var(--strong-color);
  font-weight: 600;
}

/* Links with better hover states */
.markdown-section a {
  color: var(--link-color);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration);
}

.markdown-section a:hover {
  border-bottom-color: var(--link-color);
}

/* Sidebar name/logo styling */
.app-name {
  font-family: var(--heading-font-family);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

/* Enhanced badges/shields */
.markdown-section p > img[alt*="badge"],
.markdown-section p > img[alt*="shield"] {
  margin: 0.125rem;
  vertical-align: middle;
}