/* ── Reset the Nelmio-specific header layout ───────────────────────── */

/* Remove the teal :before pseudo-element (Nelmio's fixed bar) */
header:before {
    display: none;
}

/* ── Body ──────────────────────────────────────────────────────────── */

body {
    margin: 0;
    margin-top: 96px;
    transition: margin-top 0.3s ease;
}

/* ── Custom Vaultify topbar ────────────────────────────────────────── */

header.vlt-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 96px;
    z-index: 100;
    background-color: rgb(227, 237, 249);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    transition: height 0.3s ease, box-shadow 0.3s ease;
}

/* Brand (left side) */
.vlt-topbar-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vlt-topbar-brand a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.vlt-logo {
    height: 70px;
    width: auto;
    margin-right: 0.45rem;
    transition: height 0.3s ease;
}

/* Explore bar (right side) */
.vlt-topbar-explore {
    display: flex;
    align-items: center;
    gap: 8px;
}

#vlt-spec-url {
    width: 380px;
    height: 36px;
    padding: 0 12px;
    border: 2px solid #532453;
    border-radius: 4px;
    font-size: 13px;
    color: #1a1a2e;
    background: #f5f5f5;
    transition: width 0.3s ease;
}

#vlt-explore-btn {
    height: 36px;
    padding: 0 18px;
    background-color: #532453;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#vlt-explore-btn:hover {
    background-color: #7a3a7a;
}

/* ── RWD: mobile — compact state applied at CSS parse time (no flash) ─ */

@media(max-width:639px){
    /* Prevent SwaggerUI's wide content from expanding the layout viewport.
       position:fixed uses the layout viewport — without this, the header becomes
       wider than the physical screen and the explore bar slides off the right edge. */
    html{overflow-x:hidden!important;}
    body{margin-top:46px!important;transition:none!important;}
    header.vlt-topbar{height:46px!important;padding:0 12px!important;overflow:hidden!important;transition:none!important;}
    .vlt-topbar-brand{flex-shrink:1!important;min-width:0!important;}
    .vlt-logo{height:30px!important;max-width:38px!important;transition:none!important;}
    .vlt-topbar-explore{flex-shrink:0!important;gap:4px!important;}
    #vlt-spec-url{width:110px!important;min-width:0!important;height:30px!important;padding:0 8px!important;font-size:11px!important;transition:none!important;}
    #vlt-explore-btn{height:30px!important;padding:0 10px!important;font-size:11px!important;}
}

/* ── Swagger UI content area ───────────────────────────────────────── */

/* Accent colours for method badges, buttons, borders */
small.version-stamp {
    background-color: #532453 !important;
}

.swagger-ui .scheme-container {
    border-top: 5px solid #532453 !important;
    box-shadow: none !important;
    padding: 5px 0 !important;
}

section.models {
    border-top: 5px solid #532453 !important;
}

.opblock-tag-section h3 {
    display: inline !important;
    border-top: 2px dotted #532453 !important;
}

.opblock-tag-section h3 span {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #1d4ed8 !important;
}

/* Title: target by .info .title (Swagger UI renders this as h2, not h1).
   Also override #swagger-ui.api-platform .info .title from NelmioApiDocBundle's
   own inline stylesheet (colour #3caab5 — API Platform teal). */
#swagger-ui .info .title,
.swagger-ui .info .title {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    color: #532453 !important;
}

.swagger-ui .servers-title {
    font-size: 18px;
    font-weight: bold;
}

.information-container hr {
    border: 1px dashed #ddd !important;
}

.swagger-ui .info .description h2,
.swagger-ui .info .renderedMarkdown h2 {
    color: #1d4ed8 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
}

.swagger-ui .info .description h3,
.swagger-ui .info .renderedMarkdown h3 {
    color: #111827 !important;
    font-weight: 700 !important;
}

.swagger-ui textarea {
    min-height: 180px !important;
}

/* Keep the SwaggerUI topbar hidden — we use our own header */
#swagger-ui .topbar {
    display: none !important;
}

/* ── Force light mode ───────────────────────────────────────────────────────
   Two-layer defence:

   1. `color-scheme: only light` — tells the browser this page supports light
      mode ONLY, preventing browser UA dark styles on form elements / body.

   2. `.dark-mode` CSS overrides — swagger-ui-standalone-preset.js adds the
      class "dark-mode" to <html> when the OS is set to dark mode, and
      swagger-ui.css contains extensive .dark-mode rules (background #1c2022,
      text #e4e6e6, etc.).  JavaScript in the Twig template removes this class
      immediately after init and uses MutationObserver to block re-addition.
      These CSS rules are a belt-and-suspenders fallback in case the JS hasn't
      run yet on the first paint.
   ─────────────────────────────────────────────────────────────────────────── */
html,
body {
    color-scheme: only light;
}

/* Belt-and-suspenders: override swagger-ui.css .dark-mode rules while the JS
   MutationObserver hasn't fired yet (first paint). */
html.dark-mode,
html.dark-mode body {
    background: #fff !important;
    color: #3b4151 !important;
}

html.dark-mode .swagger-ui {
    background: #fff !important;
    color: #3b4151 !important;
}

html.dark-mode .swagger-ui input,
html.dark-mode .swagger-ui textarea,
html.dark-mode .swagger-ui select {
    background: #fff !important;
    color: #3b4151 !important;
    border-color: #d9d9d9 !important;
}