:root {
  --font-noto-sans: "Noto Sans";
  --portal-header-height: 72px;
  --portal-logo-height: 50px;
  --header-border-color: #e6e6e6;
  --language-select-color: #191919;
  --language-select-bg-color: #ffffff;
  --language-select-border-color: #e6e6e6;
  --language-select-focus-border-color: #191919;
  --language-select-arrow: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke="%23191919" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  --left-navbar-background-color: #f8f9fa;
  --left-navbar-selected-background-color: #ededed;
}

/* Dark theme — keyed off the stable attribute set by custom-script.js
   (watchTheme). Do NOT target APIMatic's emotion/styled-components hashes
   here; they are regenerated on every portal build. */
html[data-uv-theme="dark"] {
  --header-border-color: #5f5e5e;
  --language-select-color: #e6e6e6;
  --language-select-bg-color: #13131d;
  --language-select-border-color: #4d4d4d;
  --language-select-focus-border-color: #e6e6e6;
  --language-select-arrow: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke="%23e6e6e6" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  --left-navbar-background-color: #333333;
  --left-navbar-selected-background-color: #4f4d56;
}

/* Navbar */
.header-navbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  column-gap: 20px;
  height: 30px;
}

.header-right {
  float: right;
}

/* Portal header */
.portal-header,
.branding-container {
  height: var(--portal-header-height) !important;
}

.portal-header {
  font-family: var(--font-noto-sans);
  overflow: hidden;
}

.branding-container {
  /* Logo left-aligned with sidebar menu content (x=18px) */
  padding-left: 18px;

  /* Language selector right-aligned with content right edge */
  padding-right: 28px;
}

.hosted-api-docs {
  height: calc(100vh - var(--portal-header-height)) !important;
}

/* Logo */
.logo img {
  height: var(--portal-logo-height) !important;
  width: auto;
  display: block;
}

/* Header bottom border */
div[role="main"] {
  border-top-color: var(--header-border-color) !important;
}

/* Language selector */
#language-select {
  position: relative;
  font-family: var(--font-noto-sans);
  font-size: 13.33px;
  color: var(--language-select-color);
  background-color: var(--language-select-bg-color);
  border: 1px solid var(--language-select-border-color);
  border-radius: 8px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--language-select-arrow);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 30px;
  padding-left: 8px;
  height: 28px;
  box-shadow: none;
  outline: none;
}

#language-select:hover {
  border-color: var(--language-select-border-color);
}

#language-select:focus {
  border-color: var(--language-select-focus-border-color);
}

/* Main sidebar container */
#left-navbar-parent,
#left-navbar-parent [data-testid="navbar-tools-card"],
#left-navbar-parent [data-testid="menu-select"],
#left-navbar-parent [data-testid="search-button"],
#left-navbar-parent .rc-menu-submenu-open,
#left-navbar-parent .sc-eHRHtx {
  background-color: var(--left-navbar-background-color) !important;
}

/* Selected menu item in sidebar */
.rc-menu-item-selected,
.rc-menu-item-selected a {
  background-color: var(--left-navbar-selected-background-color) !important;
  border-radius: 8px !important;
}

/* Highlight only the directly hovered submenu title (rc-menu marks all
   ancestor submenus as -active on hover, so :hover is used instead). */
.rc-menu-submenu-title:hover {
  background-color: var(--left-navbar-selected-background-color) !important;
}

/* Collapsible block font */
button {
  font-family: var(--font-noto-sans);
}