/*
 * Hogwarts brand pass over the vendored swagger-ui-dist theme (see
 * swagger-view.tsx). Reuses this site's own Mantine CSS custom properties
 * (--mantine-*, set globally by @mantine/core/styles.css from src/theme.ts)
 * instead of hardcoding hex values, so this file tracks the brand color,
 * font, radius, and light/dark toggle automatically if theme.ts ever
 * changes. Loaded after swagger-ui.css.
 *
 * Every rule below is scoped under .swagger-ui and uses !important — the
 * vendor stylesheet re-declares things like font-family on dozens of
 * individual selectors at equal-or-higher specificity, and !important also
 * removes any dependency on <link> load/hoist order relative to the base
 * swagger-ui.css file.
 *
 * Deliberately left untouched: the GET/POST/PUT/DELETE method badge colors
 * and the 2xx/4xx/5xx response-code colors — those are meaningful
 * convention across the API tooling ecosystem, not decoration, so
 * recoloring them to the brand purple would make the reference harder to
 * scan rather than more "on-brand".
 */

/* The topbar only supports loading a spec by URL/file upload — this app
   always embeds the spec object directly server-side (see
   src/app/(site)/docs/swagger/page.tsx), so that bar has no working
   purpose here and only duplicates the site's own header right above it. */
.swagger-ui .topbar {
  display: none !important;
}

.swagger-ui,
.swagger-ui * {
  font-family: var(--mantine-font-family) !important;
}

.swagger-ui pre,
.swagger-ui code,
.swagger-ui .microlight {
  font-family: var(--mantine-font-family-monospace) !important;
}

/* Brand accent — replaces swagger-ui-dist's own default blue for links,
   the primary "Execute" action, and the active response-tab label.
   --mantine-primary-color-filled already resolves to a different, legible
   shade per light/dark scheme (see theme.ts), so no separate dark-mode
   override is needed for these. */
.swagger-ui .info a,
.swagger-ui .tab li.active {
  color: var(--mantine-primary-color-filled) !important;
}

.swagger-ui .info a:hover {
  color: var(--mantine-primary-color-filled-hover) !important;
}

.swagger-ui .btn.execute {
  background-color: var(--mantine-primary-color-filled) !important;
  border-color: var(--mantine-primary-color-filled) !important;
}

.swagger-ui .btn.execute:hover {
  background-color: var(--mantine-primary-color-filled-hover) !important;
  border-color: var(--mantine-primary-color-filled-hover) !important;
}

.swagger-ui .btn.authorize {
  color: var(--mantine-primary-color-filled) !important;
  border-color: var(--mantine-primary-color-filled) !important;
}

.swagger-ui .btn.authorize svg {
  fill: var(--mantine-primary-color-filled) !important;
}

/* Generic secondary buttons ("Try it out", "Cancel", "Clear", "Reset") and
   form controls — match the site's rounded corners and drop Swagger's own
   heavy drop-shadow for a flatter, Mantine-like look. */
.swagger-ui .btn {
  border-radius: var(--mantine-radius-md) !important;
  box-shadow: none !important;
}

.swagger-ui select,
.swagger-ui input[type="text"],
.swagger-ui input[type="password"],
.swagger-ui input[type="search"],
.swagger-ui textarea {
  border-radius: var(--mantine-radius-sm) !important;
}

.swagger-ui .opblock {
  border-radius: var(--mantine-radius-md) !important;
  box-shadow: none !important;
}

/* The "servers + authorize" panel at the top of the reference — match it to
   a Mantine Card instead of Swagger's own flat panel + heavy box-shadow. */
.swagger-ui .scheme-container {
  background: var(--mantine-color-body) !important;
  border: 1px solid var(--mantine-color-default-border) !important;
  border-radius: var(--mantine-radius-md) !important;
  box-shadow: none !important;
}

.swagger-ui .opblock-tag:hover {
  background: var(--mantine-color-default-hover) !important;
}