/* Workaround fix. This removes the hover effect on a sidebar separatorLine */
aside div[data-cy="sidebar-item-"] {
    pointer-events: none;
}

/* ===========================
   Navigation sidebar: HTTP method badges (restore legacy left-side pill style)
   =========================== */

/* Move the HTTP method badge to the LEFT of the nav item text */
.menu-item-type-operation .tag-http {
  order: -1;
  flex-shrink: 0;
  margin-right: 6px;
  margin-left: 0 !important;
  margin-top: auto;
  margin-bottom: auto;
}

/* Pill badge base style — exact legacy Redocly dimensions */
.menu-item-type-operation .tag-http {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 16px;
  padding: 0 4px;
  border-radius: 16px;
  font-size: 10px;
  font-family: "Source Code Pro", sans-serif;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0;
  border: none !important;
}

.menu-item-type-operation .tag-http,
.menu-item-type-operation .tag-http > div {
  color: rgb(245, 247, 250) !important;
  text-transform: uppercase;
}

/* Per-method solid background colors */
.menu-item-type-operation .tag-get {
  background-color: var(--tag-operation-color-get, #6bbd5b) !important;
}

.menu-item-type-operation .tag-post {
  background-color: var(--tag-operation-color-post, #248fb2) !important;
}

.menu-item-type-operation .tag-delete {
  background-color: var(--tag-operation-color-delete, #e27a7a) !important;
}

.menu-item-type-operation .tag-patch {
  background-color: var(--tag-operation-color-patch, #e09d43) !important;
}

.menu-item-type-operation .tag-put {
  background-color: var(--tag-operation-color-put, #9b708b) !important;
}

.menu-item-type-operation .tag-head {
  background-color: var(--tag-operation-color-head, #c167e4) !important;
}

/* Schema tag: neutral gray pill */
.menu-item-type-operation .tag-schema {
  background-color: #8a8a9a !important;
}

/* ===========================
   API property fields: restore two-column table layout
   =========================== */

/* Each property becomes a two-column grid: left = field name, right = type + description */
.property {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 24px;
  align-items: start;
}

/* Header row spans both columns; flex splits field name (left) and type <em> tags (right) */
.property > div:first-child {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 24px; /* column-gap matches grid's column-gap so em tags align with description */
}

/* Field name wrapper: locked to left column width */
.property > div:first-child > span:first-child {
  flex: 0 0 200px;
  overflow-wrap: break-word;
}

/* Field names: regular weight (not bold) */
.property .schema-name {
  font-weight: 400;
}

/* Description: right column, row 2 */
.property > [data-component-name="Markdown/Markdown"] {
  grid-column: 2;
  grid-row: 2;
}

/*
 * "Show N properties" button/expanded nested properties: spans full width.
 * grid-column: 1/-1 means it needs both columns free — auto-placement puts it
 * in row 3 (since description already occupies col 2 of row 2). The button
 * inside is left-aligned by default, so it visually sits under the field name.
 * Full width is required so expanded nested .property items (which also use
 * the 200px|1fr grid) have enough space and don't overflow.
 */
.property > .view-nested-wrapper {
  grid-column: 1 / -1;
}