:root {
  --navbar-height: 88px;
  --font-ui: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-prose: "Roboto Slab", ui-serif, Georgia, "Times New Roman", Times, serif;
  --font-mono: "Courier Prime", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-code: "Courier Prime", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

html {
  scroll-padding-top: calc(var(--navbar-height, 88px) + 20px);
  height: 100%;
}
#react-aria-0-2 {
  font-family: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  border-top: 1px solid var(--color-border) !important;
  border: 1px solid var(--color-border) !important;
  padding: 1rem 0.5rem !important;
}
#react-aria-0-2:hover {
  border-color: var(--color-base-300) !important;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.sl-elements {
  font-family: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.sl-elements h1,
.sl-elements h2,
.sl-elements h3,
.sl-elements h4,
.sl-elements h5,
.sl-elements h6,
.sl-elements .sl-link-heading,
.sl-elements .sl-link-heading__link {
  font-family: "Roboto Slab", ui-serif, Georgia, "Times New Roman", Times, serif;
}

/* Body text */
.sl-elements .sl-prose,
.sl-elements .sl-text-body,
.sl-elements .sl-text-paragraph,
.sl-elements .sl-text-muted,
.sl-elements .sl-text-light {
  font-family: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Code elements */
.sl-elements code,
.sl-elements pre,
.sl-elements kbd,
.sl-elements samp,
.sl-elements .sl-code-group pre,
.sl-elements .sl-live-code pre,
.sl-elements .sl-code-group code,
.sl-elements .sl-live-code code,
.sl-elements .JsonSchemaViewer code,
.sl-elements .JsonSchemaViewer pre,
.sl-elements .HttpOperation code,
.sl-elements .HttpOperation pre,
.sl-elements [class*="Code"],
.sl-elements [class*="code"] {
  font-family: "Courier Prime", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.sl-panel__titlebar.sl-flex.sl-items-center {
  background-color: oklch(23.26% .014 253.1) !important;
  border-radius: 3px 3px 0 0 !important;
}

.sl-panel__titlebar.sl-flex.sl-items-center[expanded="True"] {
  background-color: oklch(23.26% .014 253.1) !important;
  border-radius: 0 !important;
}

.sl-panel__titlebar.sl-flex.sl-items-center[expanded="False"] {
  background-color: oklch(23.26% .014 253.1) !important;
  border-radius: 0 0 3px 3px !important;
}

.sl-panel__titlebar.sl-flex.sl-items-center button {
  color: oklch(97.807% .029 256.847) !important;
  background-color: transparent !important;
}

.sl-panel__titlebar.sl-flex.sl-items-center button:hover {
  background-color: oklch(23.26% .014 253.1 / 0.8) !important;
}

.sl-code-viewer {
  background-color: #2d394e !important;
  color: #e5e9f0 !important;
  border-radius: 0 0 3px 3px !important;
}

.sl-code-viewer.sl-grid.sl-inverted {
  border-radius: 3px !important;
}

span.token.keyword {
  color: #f9878f !important;
}
span.token.string {
  color: #a1e3a1 !important;
}

span.token.constant {
  color: #85c3e2 !important;
}

span.token.function {
  color: #fbd45f !important;
}

span.token.class-name {
  color: #f667a5 !important;
}

span.token.variable {
  color: #d6e5cf !important;
}

span.token.punctuation {
  color: #e5e9f0 !important;
}
/* :root .sl-inverted, [data-theme="light"] .sl-inverted, [data-theme="light"] .sl-inverted .sl-inverted .sl-inverted {
  background-color: #222b3a !important;
  color: #e5e9f0 !important;
  border-radius: 3px;
} */

/* Tables */
.sl-elements table,
.sl-elements .Table,
.sl-elements .ModelTable {
  font-family: "Barlow Condensed", "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Cards */
.sl-elements .card {
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  margin: 1rem 0;
  font-family: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

[data-theme="light"] .sl-elements .card {
  background-color: var(--color-base-100);
  border-color: var(--color-base-300);
}

[data-theme="dark"] .sl-elements .card {
  background-color: var(--color-base-100);
  border-color: var(--color-base-300);
}

.sl-elements .card.border-info {
  border-color: var(--color-info) !important;
  border-width: 1px;
}

[data-theme="dark"] .sl-elements .card.border-info {
  border-color: #85c3e2 !important;
}

.sl-elements .card-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid;
  font-weight: 600;
  font-family: "Roboto Slab", ui-serif, Georgia, "Times New Roman", Times, serif;
}

[data-theme="light"] .sl-elements .card-header {
  background-color: var(--color-base-200);
  border-color: var(--color-base-300);
  color: var(--color-base-content);
}

[data-theme="dark"] .sl-elements .card-header {
  background-color: var(--color-base-200);
  border-color: var(--color-base-300);
  color: var(--color-base-content);
}

.sl-elements .card-body {
  padding: 1rem;
}

[data-theme="light"] .sl-elements .card-body {
  color: var(--color-base-content);
}

[data-theme="dark"] .sl-elements .card-body {
  color: var(--color-base-content);
}

.sl-elements .card-body code {
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

/* Buttons */
.sl-button {
  font-family: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  border-radius: 4px;
  border: var(--color-border-button) 1px solid !important;
}

/* Container */
.sl-elements-container {
  min-height: calc(100vh - var(--navbar-height, 88px));
}

/* Try-it panel height */
.sl-elements .TryItPanel .sl-panel__content-wrapper.sl-bg-canvas-100
  .sl-overflow-y-auto.ParameterGrid.OperationParametersContent {
  max-height: clamp(160px, 15vh, 320px) !important;
}

/* Navbar */
.docs-body {
  padding-top: var(--navbar-height, 88px);
  flex: 1;
}

#docs-navbar.navbar {
  background-color: var(--color-base-100) !important;
  border-bottom: 1px solid var(--color-border);
}

[data-theme="dark"] #docs-navbar.navbar {
  background-color: var(--color-base-100) !important;
  border-bottom: 1px solid var(--color-border);
}

#docs-navbar .nav-link,
#docs-navbar .dropdown-item,
#docs-navbar .bi,
#docs-navbar .btn,
#docs-navbar .navbar-brand {
  color: var(--color-base-content);
}

[data-theme="light"] #docs-navbar .nav-link {
  color: #5f6b7a !important;
}

[data-theme="light"] #docs-navbar .nav-link.active,
[data-theme="light"] #docs-navbar .nav-link:hover,
[data-theme="light"] #docs-navbar .dropdown-item:hover {
  color: #1f2937 !important;
}

[data-theme="dark"] #docs-navbar .nav-link,
[data-theme="dark"] #docs-navbar .dropdown-item,
[data-theme="dark"] #docs-navbar .bi,
[data-theme="dark"] #docs-navbar .btn,
[data-theme="dark"] #docs-navbar .navbar-brand {
  color: #e5e9f0;
}

[data-theme="dark"] #docs-navbar .nav-link.active,
[data-theme="dark"] #docs-navbar .nav-link:hover,
[data-theme="dark"] #docs-navbar .dropdown-item:hover {
  color: var(--color-primary) !important;
}

#docs-navbar .dropdown-menu {
  background-color: var(--color-base-100);
  border-color: var(--color-border);
}

[data-theme="dark"] #docs-navbar .dropdown-menu {
  background-color: var(--color-base-100);
  border-color: var(--color-base-300);
}

#docs-navbar .btn-login {
  color: var(--color-base-content);
  background: var(--color-base-100);
  border-color: var(--color-base-300);
}

[data-theme="dark"] #docs-navbar .btn-login {
  color: var(--color-base-content);
  background: var(--color-base-100);
  border-color: var(--color-base-300);
}

/* Footer */
footer {
  margin-top: auto;
}

[data-theme="dark"] body {
  background-color: var(--color-base-100); /*var(--color-canvas);*/
}

[data-theme="light"] body {
  background-color: var(--color-base-100); /*var(--color-canvas);*/
}

[data-theme="dark"] .docs-body {
  background-color: var(--color-base-100); /*var(--color-canvas);*/
}

[data-theme="light"] .docs-body {
  background-color: var(--color-base-100); /*var(--color-canvas);*/
}

.docs-body .sl-bg-canvas,
.app-footer {
  background-color: var(--color-base-100); /*var(--color-canvas);*/
  border-top: none;
  color: var(--color-base-content);
}

.app-footer .nav-link,
.app-footer p,
.app-footer span,
.app-footer a {
  color: var(--color-base-content) !important;
}

.app-footer a:hover {
  color: var(--color-primary) !important;
}

/* Sidebar fonts */
.sl-elements .sl-sidebar {
  font-family: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.sl-elements .sl-sidebar__title,
.sl-elements .sl-sidebar .sl-link-heading,
.sl-elements .sl-sidebar .sl-link-heading__link,
.sl-elements .sl-sidebar .sl-text-heading,
.sl-elements .sl-sidebar .sl-sidebar-item__title,
.sl-elements .sl-sidebar .sl-sidebar-item--section,
.sl-elements .sl-sidebar .sl-sidebar-group__title,
.sl-elements .sl-sidebar .sl-font-prose,
.sl-elements .sl-sidebar h1,
.sl-elements .sl-sidebar h2,
.sl-elements .sl-sidebar h3,
.sl-elements .sl-sidebar h4,
.sl-elements .sl-sidebar h5,
.sl-elements .sl-sidebar h6 {
  font-family: "Roboto Slab", ui-serif, Georgia, "Times New Roman", Times, serif !important;
}

.sl-elements .sl-sidebar .sl-h-md .sl-text-base {
  font-family: "Roboto Slab", ui-serif, Georgia, "Times New Roman", Times, serif !important;
}

.sl-elements .sl-sidebar .sl-sidebar-item__children .sl-text-base,
.sl-elements .sl-sidebar .sl-sidebar-item__children .sl-text-sm,
.sl-elements .sl-sidebar .sl-sidebar-item__children .sl-text-xs,
.sl-elements .sl-sidebar .sl-text-sm,
.sl-elements .sl-sidebar .sl-text-xs {
  font-family: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

.sl-elements .sl-sidebar .sl-text-paragraph.sl-font-prose,
.sl-elements .sl-sidebar .sl-text-heading.sl-font-prose,
.sl-elements .sl-sidebar .sl-text-heading.sl-text-paragraph {
  font-family: "Roboto Slab", ui-serif, Georgia, "Times New Roman", Times, serif !important;
}

/* Endpoint documentation layout reordering */
.sl-elements .sl-stack--vertical.sl-stack--10 {
  display: flex;
  flex-direction: column;
}

.sl-elements .sl-stack--vertical.sl-stack--10 > .sl-relative:has(.HttpOperation__Description) {
  order: 2;
}

.sl-elements .sl-stack--vertical.sl-stack--10 > .sl-stack--vertical.sl-stack--8:has(#Request) {
  order: 1;
}

.sl-elements .sl-stack--vertical.sl-stack--10 > .sl-stack--vertical.sl-stack--1:has(#Responses) {
  order: 3;
}

/* Sidebar endpoint ordering (CSS - may not work due to dynamic rendering) */
.sl-elements .sl-my-3 > div {
  display: flex;
  flex-direction: column;
}

.sl-elements .sl-my-3 > div > [title="Get user's profile"] {
  order: 1;
}

.sl-elements .sl-my-3 > div > [title="Get metrics detailed info"] {
  order: 2;
}

.sl-elements .sl-my-3 > div > [title="Get metrics data"] {
  order: 3;
}

.sl-elements .sl-my-3 > div > [title="Get metrics availability"] {
  order: 4;
}

.sl-elements .sl-my-3 > div > [title="Get metrics oldest timestamp"] {
  order: 5;
}

.sl-elements .sl-my-3 > div > [title="Get metrics null timestamps"] {
  order: 6;
}

.sl-elements .sl-my-3 > div > [title="Get metrics stats"] {
  order: 7;
}

/* Theme switcher */
.theme-switcher {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.theme-switcher__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-switcher__label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0 !important;
  width: 62px;
  height: 30px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid #d5ddeb;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.theme-switcher__icon {
  width: 14px;
  text-align: center;
  font-size: 14px;
  line-height: 1;
  color: #f2b705;
}

.theme-switcher__icon--moon {
  color: #6c7a89;
}

.theme-switcher__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}

.theme-switcher__input:checked + .theme-switcher__label {
  background: #1f2937;
  border-color: var(--color-base-300);
}

.theme-switcher__input:checked + .theme-switcher__label .theme-switcher__thumb {
  transform: translateX(30px);
  background: var(--color-base-200);
}

.theme-switcher__input:checked + .theme-switcher__label .theme-switcher__icon--sun {
  color: #a1a1aa;
}

.theme-switcher__input:checked + .theme-switcher__label .theme-switcher__icon--moon {
  color: #fbbf24;
}