/*
 * custom-overrides.css
 * McLeod API Docs (Stoplight Elements) — supplemental style overrides.
 *
 * Load this AFTER styles.min.css so cascade order lets these rules win:
 *
 *   <link rel="stylesheet" href=".../styles.min.css">
 *   <script src=".../web-components.min.js"></script>
 *   <link rel="stylesheet" href=".../custom-overrides.css">
 *
 * Do not edit styles.min.css directly — it is the unmodified vendor
 * @stoplight/elements bundle and will be overwritten on the next refresh.
 * Selectors below target real classes found in styles.min.css
 * (.sl-elements, .ElementsTableOfContentsItem, .TryItPanel, .HttpOperation).
 */

/* ---------------------------------------------------------------------
 * 1. Sticky, more distinct tag-group headers in the left nav
 *    (x-tagGroups renders as top-level, non-clickable section labels
 *    above their grouped tags in the sidebar tree).
 * ------------------------------------------------------------------- */
.sl-elements aside,
.sl-elements [class*="Sidebar"] {
  --nav-group-bg: var(--color-canvas-100, #f7f7f8);
}

/* Group/category labels: make them sticky so long tag lists don't
 * scroll a group header out of view while browsing its tags. */
/* Group/category labels: make them sticky so long tag lists don't
 * scroll a group header out of view while browsing its tags. */
.sl-elements [class*="Sidebar"] div[class*="uppercase"] {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--nav-group-bg);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border, #e3e3e6);
}

/* Slightly indent + lighten individual endpoints so the group/tag
 * hierarchy is easier to scan at a glance. */
.sl-elements .ElementsTableOfContentsItem {
  padding-left: 4px;
}

/* ---------------------------------------------------------------------
 * 2. HTTP method badges — increase contrast/size so GET/POST/PUT/PATCH/
 *    DELETE are easier to distinguish while scanning a long endpoint list.
 * ------------------------------------------------------------------- */
.sl-elements [class*="HttpMethodColor"],
.sl-elements [data-testid="http-method"] {
  font-weight: 700;
  min-width: 52px;
  text-align: center;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------
 * 3. Report / binary responses (application/pdf) — flag visually so
 *    users immediately notice "Try It" will download a file, not JSON.
 * ------------------------------------------------------------------- */
/* NOTE: CSS cannot select elements by their text content (no cross-browser
   :contains()), so "application/pdf" responses can't be styled directly.
   The reliable fix is textual: McWebScraper already appends a "returns a
   PDF file, not JSON" note to report-endpoint descriptions. This rule just
   nudges any single-line code block in the description area (where that
   note lives) to stand out a bit more. */
.sl-elements .HttpOperation__Parameters .sl-markdown-viewer p:has(code:only-child) {
  font-style: italic;
}

/* ---------------------------------------------------------------------
 * 4. Try It panel — tighten spacing and make the "Send" button and
 *    response status more prominent.
 * ------------------------------------------------------------------- */
.sl-elements .TryItPanel {
  row-gap: 8px;
}

.sl-elements .TryItPanel button[type="submit"],
.sl-elements .TryItPanel [class*="Button"][class*="primary"] {
  font-weight: 600;
}

/* ---------------------------------------------------------------------
 * 5. Wider content column on large monitors — reduces excessive line
 *    length for schema tables and long descriptions.
 * ------------------------------------------------------------------- */
@media (min-width: 1600px) {
  .sl-elements .HttpOperation,
  .sl-elements [class*="MainContent"] {
    max-width: 1200px;
  }
}

/* ---------------------------------------------------------------------
 * 6. Deprecated/internal endpoint de-emphasis (if hideInternal is not
 *    used and such endpoints are still shown).
 * ------------------------------------------------------------------- */
.sl-elements [class*="Deprecated"] {
  opacity: 0.6;
}

/* ---------------------------------------------------------------------
 * 7. Collapse/expand arrow for Request Body / Response field lists.
 *    Requires custom-overrides.js, which toggles inline display:none on
 *    the field-rows container directly (not a CSS class), so the toggle
 *    works regardless of stylesheet load order. This block only styles
 *    the button custom-overrides.js creates.
 * ------------------------------------------------------------------- */
.sl-collapsible-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-canvas-100, #f7f7f8);
  border: 1px solid var(--color-border, #d5d5d8);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary, #0b5cd7);
  padding: 4px 10px;
  margin: 4px 0 8px;
}

.sl-collapsible-toggle:hover {
  background: var(--color-canvas-200, #ececef);
}

.sl-collapsible-arrow {
  display: inline-block;
  font-size: 10px;
}

/* ---------------------------------------------------------------------
 * 8. Sidebar endpoint search box.
 *    Requires custom-overrides.js, which inserts a text input above the
 *    ENDPOINTS tag-group list and filters it as the user types.
 * ------------------------------------------------------------------- */
.sl-search-wrapper {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background: var(--color-canvas-100, #f7f7f8) !important;
  padding: 8px !important;
  border-bottom: 1px solid var(--color-border, #e3e3e6) !important;
  pointer-events: auto !important;
}

.sl-search-input {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  border: 1px solid var(--color-border, #d5d5d8) !important;
  border-radius: 4px !important;
  background: #fff !important;
  cursor: text !important;
  pointer-events: auto !important;
  display: block !important;
  appearance: searchfield;
  font-family: inherit;
}

.sl-search-input:focus {
  outline: none !important;
  border-color: var(--color-primary, #0b5cd7) !important;
  box-shadow: 0 0 0 2px rgba(11, 92, 215, 0.15) !important;
}

.sl-search-input::placeholder {
  color: #999 !important;
}

.sl-search-no-results {
  padding: 10px 12px !important;
  font-size: 12px !important;
  font-style: italic !important;
  color: var(--color-muted, #6b6b76) !important;
  pointer-events: auto !important;
}