/**
 * Partner Portal – Bug Fix Styles
 * Companion to home-fixes.js
 */

/* ── Bug 1.1: Copy tooltip ─────────────────────────────────────────────── */
.anchor-copy-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e;
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  animation: tooltip-fade 1.8s ease forwards;
}

.anchor-copy-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1a1a2e;
}

@keyframes tooltip-fade {
  0%   { opacity: 0; transform: translateX(-50%) translateY(4px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Bug 1.2: Scroll offset for sticky navbar ──────────────────────────── */
[id] {
  scroll-margin-top: 92px;
}

/* ── Chain/anchor icon polish ──────────────────────────────────────────── */
a[href^="#"] .fa-link,
a[href^="#"] .fa-chain {
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

a[href^="#"]:hover .fa-link,
a[href^="#"]:hover .fa-chain {
  opacity: 1;
}

/* ── Future: Stripe-inspired method badges (low priority) ──────────────── */
.method-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 8px;
}

.method-badge.get    { background: #e7f5e9; color: #1a7f37; }
.method-badge.post   { background: #fff3cd; color: #856404; }
.method-badge.patch  { background: #e8f0fe; color: #1a56db; }
.method-badge.delete { background: #fde8e8; color: #c0392b; }

/* ── Future: Code block copy button (low priority) ─────────────────────── */
.code-block-wrapper {
  position: relative;
}

.code-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #ccc;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.code-copy-btn:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}
/* ============================================================
   Navbar V2 - Figma: Partner Portal Revamp, node 183-3314
   ============================================================ */

/* Top bar container */
.navbar,
header.navbar,
.header-fixed .wrapper,
.page-header {
    background-color: #2F86DD !important;
    border-bottom: none !important; /* Audit P1 #5 — remove thin grey line */
    min-height: 64px;
    height: 64px;
    padding: 12px !important;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* JT Logo */
.jt-logo {
    display: flex;
    align-items: center;
    height: 30px;
    text-decoration: none;
}

.jt-logo img {
    height: 30px;
    width: auto;
    max-width: 148px;
    filter: brightness(0) invert(1); /* render blue SVG as white on blue navbar — Audit P1 #1 */
}

/* Center nav links container */
.navbar .navbar-nav,
.navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    margin: 0 auto;
    height: 40px;
}

/* Individual nav items */
.navbar-nav .nav-item .nav-link,
.navbar-nav > li > a {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.08px;
    color: #FFFFFF !important;
    padding: 8px 16px;
    border-radius: 4px;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.navbar-nav .nav-item .nav-link:hover,
.navbar-nav > li > a:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #FFFFFF !important;
    text-decoration: none;
}

/* Active nav link - darker blue pill */
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item .nav-link.active,
.navbar-nav > li.active > a {
    background-color: #1E6DBB !important;
    color: #FFFFFF !important;
    border-radius: 4px;
}

/* Right-side user area */
.navbar .navbar-right,
.navbar #kt_header_topbar,
.navbar .topbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    height: 40px;
}

/* Username label */
.navbar .user-name,
.navbar .topbar-item .user-name,
.navbar #kt_header_user .user-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.08px;
    color: #FFFFFF;
}

/* Avatar circle (initials) */
.navbar .avatar-name,
.navbar .symbol .symbol-label,
.navbar .user-avatar {
    width: 25px;
    height: 25px;
    min-width: 25px;
    background-color: #C0DAF5 !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    color: #343A40 !important;
}

/* Ellipsis / kebab icon next to username */
.navbar .user-menu-icon,
.navbar .topbar-item .btn-icon i {
    color: #FFFFFF !important;
    font-size: 16px;

    /* ── User section: tighten avatar + name dropdown ─── */
    .navbar-collapse .avatar-initials + .navbar-nav {
        margin-left: 8px !important;
            margin-right: 0 !important;
            }

            /* ═══════════════════════════════════════════════════════════════
               API RESOURCES PAGE — V2 styles (DSGN-440)
                  CSS-only pass: hide topbar, title, layout prep for sidebar
                     Sidebar nav is a separate JS task.
                        ═══════════════════════════════════════════════════════════════ */

                    /* 1. Hide Swagger topbar branding (keep bar for version selector) */
                        html body .swagger-ui .topbar .topbar-wrapper a,
                        html body .swagger-ui .topbar .topbar-wrapper .download-url-wrapper {
                       display: none !important;
                        }
                        html body .swagger-ui .topbar {
                         background: #f8f9fa !important;
                            min-height: 48px !important;
                        }

                            /* ── 2. Page title — match V2 weight/size ─────────────────────── */
                            .body-padding > .row > h3 {
                                font-family: 'Poppins', sans-serif;
                                    font-size: 28px;
                                        font-weight: 600;
                                            color: #1A1A2E;
                                                margin-bottom: 4px;
                                                }

                                                .body-padding > .row > p {
                                                    font-family: 'Poppins', sans-serif;
                                                        font-size: 14px;
                                                            color: #6B7280;
                                                                margin-bottom: 24px;
                                                                }

                                                                /* ── 3. Layout prep — reserve left column for future sidebar ───── */
                                                                /* When sidebar JS is added it will inject .api-sidebar into .body-padding
                                                                   and shift content right. For now just ensure the swagger block has
                                                                      correct max-width and left padding so content won't jump on sidebar load. */
                                                                      .body-padding .swagger-ui .wrapper {
                                                                          padding: 0;
                                                                          }

                                                                          .body-padding .swagger-ui .information-container.wrapper {
                                                                              padding: 0 20px;
                                                                              }

                                                                              /* ── 4. Clean up Swagger scheme-container (API v1 bar) ─────────── */
                                                                              .swagger-ui .scheme-container {
                                                                                  background: #fff;
                                                                                      box-shadow: none;
                                                                                          padding: 8px 0;
                                                                                              border-bottom: 1px solid #E5E7EB;
                                                                                              }

                                                                                              /* ── 5. Tighten opblock tag headers to match V2 section style ──── */
                                                                                              .swagger-ui .opblock-tag {
                                                                                                  font-family: 'Poppins', sans-serif;
                                                                                                      font-size: 16px;
                                                                                                          font-weight: 600;
                                                                                                              color: #1A1A2E;
                                                                                                                  border-bottom: 1px solid #E5E7EB;
                                                                                                                      padding: 12px 0;
                                                                                                                      }
}

/* ── API Resources & Programmatic shared styles ────────────────────────── */

/* ── LAYOUT ─────────────────────────────────────────────────────────────── */
.api-resources-body {
    display: flex;
    height: calc(100vh - 64px);
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    background: #fff;
}

/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */
.api-sidebar {
    width: 276px;
    min-width: 276px;
    display: flex;
    flex-direction: column;
    background: #f2f3f7;
    border-right: 1px solid #e4e6ef;
    overflow: hidden;
    transition: width 0.25s ease, min-width 0.25s ease;
    flex-shrink: 0;
}

.api-sidebar.collapsed {
    width: 0;
    min-width: 0;
}

.sidebar-header {
    border-bottom: 1px solid #e4e6ef;
    flex-shrink: 0;
}

.sidebar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    gap: 14px;
}

.sidebar-title-text {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    line-height: 22px;
    white-space: nowrap;
}

.sidebar-collapse-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #2f86dd;
    font-size: 18px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.sidebar-search-wrap {
    padding: 8px;
}

.sidebar-search-input {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0;
    overflow: hidden;
}

.sidebar-search-icon {
    padding: 8px;
    color: rgba(24,28,50,0.6);
    font-size: 13px;
}

.sidebar-search-input input {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: rgba(24,28,50,0.6);
    padding: 8px 12px 8px 0;
    background: transparent;
}

/* Sidebar Nav */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-section {
    padding: 8px 12px;
    border-bottom: 1px solid #e4e6ef;
}

.sidebar-section:last-child {
    border-bottom: none;
    flex: 1;
}

.sidebar-section-label {
    font-size: 14px;
    font-weight: 500;
    color: #495057;
    line-height: 22px;
    padding: 8px 16px;
    border-radius: 4px;
}

/* API group row */
.sidebar-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    cursor: pointer;
    border-radius: 4px;
    color: #495057;
}

.sidebar-group:hover {
    background: rgba(47,134,221,0.08);
}

.sidebar-group.open {
    color: #1e6dbb;
}

.sidebar-group-icon {
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.sidebar-group.open .sidebar-group-icon {
    /* icon changes to angle-down via JS */
}

.sidebar-group-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
}

/* Endpoint item in sidebar */
.sidebar-endpoint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 28px;
    cursor: pointer;
    border-radius: 4px;
    color: #495057;
}

.sidebar-endpoint:hover {
    background: rgba(47,134,221,0.08);
}

.sidebar-endpoint.active {
    background: #2f86dd;
    color: #fff;
}

.sidebar-endpoint.active .method-badge {
    /* stays as is */
}

.sidebar-endpoint-name {
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

/* Method badges */
.method-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0 8px;
    border-radius: 1000px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.24px;
    white-space: nowrap;
    width: 60px;
    text-align: center;
    flex-shrink: 0;
}

.method-get    { background: #d1fae5; color: #065f46; }
.method-post   { background: #d1e8ff; color: #1a56db; }
.method-put    { background: #ffe6b4; color: #855700; }
.method-delete { background: #fee2e2; color: #991b1b; }
.method-patch  { background: #ede9fe; color: #5b21b6; }

/* Schema items */
.sidebar-schema-item {
    padding: 8px 24px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #495057;
    line-height: 22px;
    border-radius: 4px;
}

.sidebar-schema-item:hover {
    background: rgba(47,134,221,0.08);
}

.sidebar-schema-item.active {
    color: #2f86dd;
}

/* ── MAIN CONTENT ───────────────────────────────────────────────────────── */
.api-main-content {
    flex: 1;
    overflow-y: auto;
    padding: 60px 48px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}

/* Page header */
.api-page-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.api-page-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.api-page-title {
    font-size: 28px;
    font-weight: 600;
    color: #3f4254;
    line-height: 32px;
    letter-spacing: -0.24px;
    margin: 0;
}

.api-page-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.btn-authorize {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border: 1px solid #2f86dd;
    border-radius: 4px;
    background: transparent;
    color: #2f86dd;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.btn-authorize:hover {
    background: rgba(47,134,221,0.08);
}

.btn-authorize i {
    font-size: 15px;
}

.api-version-dropdown-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.api-version-select {
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: rgba(24,28,50,0.6);
    padding: 8px 36px 8px 12px;
    line-height: 20px;
    cursor: pointer;
    outline: none;
    min-width: 110px;
}

.api-version-chevron {
    position: absolute;
    right: 12px;
    pointer-events: none;
    font-size: 12px;
    color: rgba(24,28,50,0.6);
}

.api-page-desc {
    font-size: 14px;
    font-weight: 400;
    color: #3f4254;
    line-height: 20px;
    letter-spacing: 0.08px;
    margin: 0;
}

/* ── ENDPOINT CARDS ────────────────────────────────────────────────────── */
.endpoint-group {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.endpoint-group-header {
    padding-bottom: 8px;
    border-bottom: 2px solid #e4e6ef;
}

.endpoint-group-title {
    font-size: 22px;
    font-weight: 600;
    color: #3f4254;
    line-height: 28px;
    letter-spacing: -0.24px;
    margin: 0;
}

.endpoint-card {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* endpoint header */
.endpoint-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #b5b5c3;
}

.endpoint-header-name {
    font-size: 13px;
    font-weight: 400;
    color: #6c757d;
    line-height: 1.5;
    letter-spacing: 0;
    margin: 0 0 3px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Path inline with badge — most prominent element */
.endpoint-path-inline {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #3d4966;
    letter-spacing: normal;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 2px 7px;
    border: none;
}

/* Summary — secondary, small, grey */
.endpoint-summary {
    font-size: 12.5px;
    font-weight: 400;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0 0 2px 0;
}

.endpoint-path {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    line-height: 22px;
    letter-spacing: -0.1px;
    margin: 2px 0 0 0;
    font-family: 'Courier New', monospace;
}

.endpoint-desc {
    font-size: 13px;
    font-weight: 400;
    color: #6c757d;
    line-height: 1.6;
    letter-spacing: 0;
    margin: 0;
}

/* Two-column layout rows */
.endpoint-row {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* LEFT col: params/responses table */
.endpoint-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border-radius: 4px;
}

.endpoint-left-header {
    font-size: 16px;
    font-weight: 500;
    color: #3f4254;
    line-height: 20px;
    letter-spacing: -0.1px;
    padding-bottom: 8px;
    border-bottom: 1px solid #b5b5c3;
}

.params-table-body {
    display: flex;
    align-items: flex-start;
}

.params-col {
    flex: 1;
    min-width: 0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.params-col-header {
    font-size: 14px;
    font-weight: 500;
    color: #3f4254;
    line-height: 20px;
    letter-spacing: 0.08px;
    height: 21px;
}

.param-name-row {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.14px;
}

.param-name-required {
    color: #181c32;
}

.param-required-star {
    color: #f64e60;
}

.param-type {
    font-size: 14px;
    font-weight: 500;
    color: #181c32;
    line-height: 20px;
    letter-spacing: 0.14px;
}

.param-in {
    font-size: 14px;
    font-weight: 500;
    color: #6c757d;
    line-height: 20px;
    letter-spacing: 0.14px;
}

.param-input {
    background: #dee2e6;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #adb5bd;
    padding: 4px 8px;
    line-height: 16px;
    width: 100%;
    outline: none;
}

/* RIGHT col: code panels */
.endpoint-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
}

.code-panel {
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
}

.code-panel-header {
    background: #6c757d;
    display: flex;
    align-items: center;
    padding: 8px;
    gap: 8px;
}

.code-panel-title {
    flex: 1;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    line-height: 20px;
    letter-spacing: -0.1px;
    white-space: nowrap;
}

.code-panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn-try-it {
    border: 1px solid #fff;
    border-radius: 2px;
    background: transparent;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    cursor: pointer;
    letter-spacing: 0.24px;
    line-height: 16px;
    white-space: nowrap;
    transition: background 0.15s;
}

.btn-try-it:hover {
    background: rgba(255,255,255,0.15);
}

.btn-copy-panel {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.85;
    transition: opacity 0.15s;
}

.btn-copy-panel:hover {
    opacity: 1;
}

.code-panel-body {
    background: #e9ecef;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 0 0 4px 4px;
}

.code-panel-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.code-panel-label {
    font-size: 16px;
    font-weight: 500;
    color: #3f4254;
    line-height: 20px;
    letter-spacing: -0.1px;
    white-space: nowrap;
}

.media-type-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.media-type-select {
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: rgba(24,28,50,0.6);
    padding: 4px 28px 4px 8px;
    line-height: 16px;
    cursor: pointer;
    outline: none;
    min-width: 140px;
}

.media-type-chevron {
    position: absolute;
    right: 8px;
    pointer-events: none;
    font-size: 11px;
    color: rgba(24,28,50,0.6);
}

.code-example-tabs {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.24px;
    white-space: nowrap;
}

.code-example-tabs .tab-active {
    color: #3f4254;
}

.code-example-tabs .tab-sep {
    color: #212529;
    margin: 0 4px;
}

.code-example-tabs .tab-inactive {
    color: #6c757d;
    cursor: pointer;
}

.code-example-tabs .tab-inactive:hover {
    color: #3f4254;
}

.code-block {
    font-family: 'Poppins', monospace;
    font-size: 14px;
    font-weight: 500;
    color: #212529;
    line-height: 20px;
    letter-spacing: 0.14px;
    white-space: pre;
    margin: 0;
}

/* Responses table */
.responses-body {
    display: flex;
    align-items: flex-start;
}

.response-col {
    flex: 1;
    min-width: 0;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.response-col-header {
    font-size: 14px;
    font-weight: 500;
    color: #3f4254;
    line-height: 20px;
    letter-spacing: 0.08px;
    height: 21px;
}

.response-code-val {
    font-size: 14px;
    font-weight: 500;
    color: #181c32;
    line-height: 20px;
    letter-spacing: 0.14px;
}

.response-desc-val {
    font-size: 14px;
    font-weight: 500;
    color: #181c32;
    line-height: 20px;
    letter-spacing: 0.14px;
}

.response-no-links {
    font-size: 14px;
    font-weight: 500;
    color: #b5b5c3;
    line-height: 20px;
    letter-spacing: 0.14px;
}

.media-controls-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.media-controls-label {
    font-size: 12px;
    font-weight: 500;
    color: #3f4254;
    line-height: 16px;
    letter-spacing: 0.24px;
    white-space: nowrap;
}

.media-accept-badge {
    background: #eaf3fc;
    border-radius: 900px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    color: #3f4254;
    line-height: 16px;
    letter-spacing: 0.24px;
    white-space: nowrap;
}

/* No params / no body */
.no-data-msg {
    font-size: 13px;
    color: #b5b5c3;
    padding: 8px 0;
    font-style: italic;
}

/* ── SCHEMAS SECTION ────────────────────────────────────────────────────── */
.schema-card {
    border: 1px solid #e4e6ef;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 16px;
}

.schema-card-header {
    background: #f2f3f7;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 500;
    color: #3f4254;
    border-bottom: 1px solid #e4e6ef;
}

.schema-card-body {
    padding: 16px;
    font-family: monospace;
    font-size: 13px;
    color: #212529;
    white-space: pre;
    background: #fff;
    overflow-x: auto;
}

/* ── AUTHORIZE MODAL ────────────────────────────────────────────────────── */
.authorize-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.authorize-modal {
    background: #fff;
    border-radius: 8px;
    width: 440px;
    max-width: 95vw;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.authorize-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e4e6ef;
    font-size: 16px;
    font-weight: 600;
    color: #3f4254;
}

.authorize-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #6c757d;
    line-height: 1;
}

.authorize-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.authorize-modal-body label {
    font-size: 13px;
    font-weight: 500;
    color: #495057;
}

.authorize-modal-body input {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    outline: none;
    width: 100%;
}

.authorize-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e4e6ef;
}

.btn-authorize-cancel {
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 6px 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    cursor: pointer;
    color: #6c757d;
}

.btn-authorize-confirm {
    background: #2f86dd;
    border: none;
    border-radius: 4px;
    padding: 6px 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    cursor: pointer;
    color: #fff;
}

/* ── EMPTY STATE ────────────────────────────────────────────────────────── */
.api-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: #6c757d;
    font-size: 14px;
    gap: 12px;
}

.api-loading i {
    font-size: 20px;
    animation: spin 1s linear infinite;
}

@@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── SEARCH HIGHLIGHT ───────────────────────────────────────────────────── */
.sidebar-hidden {
    display: none !important;
}

/* ── TRY IT OUT FORM ────────────────────────────────────────────────────── */
.try-it-form {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 20px;
    margin-top: 8px;
}

.try-it-form-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.try-it-title {
    font-size: 16px;
    font-weight: 600;
    color: #3f4254;
    padding-bottom: 12px;
    border-bottom: 1px solid #dee2e6;
}

.try-it-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.try-it-label {
    font-size: 13px;
    font-weight: 500;
    color: #495057;
    line-height: 20px;
}

.try-it-param-in {
    font-size: 12px;
    color: #6c757d;
    font-weight: 400;
}

.try-it-param-desc {
    font-size: 12px;
    color: #6c757d;
    line-height: 18px;
    margin-bottom: 2px;
}

.try-it-input {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #3f4254;
    outline: none;
    transition: border-color 0.15s;
    background: #fff;
}

.try-it-input:focus {
    border-color: #2f86dd;
    box-shadow: 0 0 0 3px rgba(47,134,221,0.15);
}

.try-it-textarea {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #3f4254;
    outline: none;
    resize: vertical;
    background: #fff;
    transition: border-color 0.15s;
    line-height: 18px;
}

.try-it-textarea:focus {
    border-color: #2f86dd;
    box-shadow: 0 0 0 3px rgba(47,134,221,0.15);
}

.try-it-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.try-it-execute-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #2f86dd;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 20px;
    cursor: pointer;
    transition: background 0.15s;
}

.try-it-execute-btn:hover {
    background: #1e6dbb;
}

.try-it-execute-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-try-it.active {
    background: rgba(255,255,255,0.2);
}

.try-it-response {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    overflow: hidden;
}

.try-it-response-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #e9ecef;
    border-bottom: 1px solid #dee2e6;
}

.try-it-response-title {
    font-size: 13px;
    font-weight: 600;
    color: #3f4254;
}

.try-it-response-status {
    font-size: 13px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 1000px;
}

.status-ok {
    background: #d1fae5;
    color: #065f46;
}

.status-err {
    background: #fee2e2;
    color: #991b1b;
}

.try-it-response-body {
    padding: 12px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #212529;
    line-height: 18px;
    white-space: pre-wrap;
    word-break: break-all;
    background: #fff;
    margin: 0;
    max-height: 400px;
    overflow-y: auto;
}

/* ── SCROLLBAR ─────────────────────────────────────────────────────────── */
.sidebar-nav::-webkit-scrollbar,
.api-main-content::-webkit-scrollbar {
    width: 4px;
}
.sidebar-nav::-webkit-scrollbar-thumb,
.api-main-content::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 2px;
}


/* ── Programmatic page specific ────────────────────────────────────────── */

/* ── Programmatic page inherits all .api-* classes from Resources page styles ── */
/* Only overrides / additions needed here */

.pgm-intro-cards {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.pgm-intro-card {
    flex: 1;
    min-width: 180px;
    background: #eaf3fc;
    border-radius: 6px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pgm-intro-card-label {
    font-size: 11px;
    font-weight: 600;
    color: #2f86dd;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pgm-intro-card-value {
    font-size: 13px;
    font-weight: 500;
    color: #3f4254;
    font-family: 'Courier New', monospace;
}

.pgm-response-codes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.pgm-rc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.pgm-rc-200 { background: #d1fae5; color: #065f46; }
.pgm-rc-400 { background: #ffe6b4; color: #855700; }
.pgm-rc-401 { background: #fee2e2; color: #991b1b; }
.pgm-rc-403 { background: #fee2e2; color: #991b1b; }
.pgm-rc-500 { background: #f3f4f6; color: #374151; }

/* ── Resizable sidebar ───────────────────────────────────────────────────── */
.api-sidebar {
    position: relative;
    min-width: 180px;
    max-width: 520px;
}

.sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 10;
    transition: background 0.15s;
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging {
    background: #2f86dd44;
}

/* ── Nav consistency fix (DSGN-440) ──────────────────────────────────────
   Problem 1: "Getting Started" renders with a white box (active pill bleeds
              onto non-active items due to Bootstrap specificity)
   Problem 2: "API Reference" bold due to dropdown-toggle default weight
   Problem 3: Dropdown caret hidden — no affordance that sub-items exist
   ─────────────────────────────────────────────────────────────────────── */

/* 1. Normalize ALL top-nav links to same weight/size — override Bootstrap */
.navbar .navbar-nav .nav-link,
.navbar .navbar-nav > .nav-item > .nav-link,
.navbar .navbar-nav .dropdown-toggle,
.navbar .navbar-nav > a.nav-link {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0.08px !important;
    color: #ffffff !important;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 8px 16px !important;
    border-radius: 4px !important;
}

/* 2. Remove Bootstrap's default bold on dropdown-toggle */
.navbar .navbar-nav .dropdown-toggle::after {
    display: none; /* hide Bootstrap's default caret — we use FA below */
}

/* 3. Show a small chevron after "API Reference" to signal dropdown */
.navbar .navbar-nav .nav-item.dropdown > .nav-link::after,
.navbar .navbar-nav .nav-item.dropdown > a.nav-link::after {
    content: '\f078'; /* fa-chevron-down */
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free', sans-serif;
    font-weight: 900;
    font-size: 10px;
    margin-left: 5px;
    vertical-align: middle;
    opacity: 0.85;
    display: inline-block;
}

/* 4. Keep active state exactly as designed */
.navbar .navbar-nav .nav-item .nav-link.active,
.navbar .navbar-nav > a.nav-link.active {
    background-color: #ffffff !important;
    color: #2f86dd !important;
    border-radius: 4px !important;
}

/* 5. Hover state — same for all items */
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .dropdown-toggle:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ── Nav consistency fix v2 (DSGN-440) ──────────────────────────────────
   Uses .portal-nav-link class applied directly in the layout HTML so we
   don't need to fight Bootstrap specificity with !important chains.
   ─────────────────────────────────────────────────────────────────────── */

/* Base: every top-nav link gets identical font + spacing */
.portal-nav-link {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    line-height: 24px !important;
    letter-spacing: 0.08px !important;
    color: #ffffff !important;
    padding: 8px 18px !important;
    border-radius: 4px !important;
    background: transparent !important;
    white-space: nowrap;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: background-color 0.15s ease;
}

/* Suppress Bootstrap's default dropdown-toggle caret entirely */
.portal-nav-dropdown::after {
    display: none !important;
}

/* Our own chevron — small, subtle, same weight */
.portal-nav-chevron {
    font-size: 10px !important;
    margin-left: 5px !important;
    opacity: 1; /* Audit P1 #2c — contrast */
    color: rgba(255, 255, 255, 0.95) !important; /* Audit P1 #2c — explicit white */
    line-height: 1; /* Audit P1 #2d — kill baseline drift */
    vertical-align: middle; /* Audit P1 #3 — align with text */
    transform-origin: center; /* Audit P1 #2d — rotate from middle */
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* smoother */
}

/* Rotate chevron when dropdown is open */
.portal-nav-dropdown[aria-expanded="true"] .portal-nav-chevron {
    transform: rotate(180deg);
}

/* Hover state */
.portal-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* Active state — white pill with blue text for high contrast on blue navbar */
.portal-nav-link.active {
    background-color: #ffffff !important;
    color: #2f86dd !important;
    font-weight: 600 !important;
}

/* Keep white pill when dropdown is open (Bootstrap adds .show) */
.portal-nav-link.active.show,
.portal-nav-link.show {
    background-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}

/* Active + open = stay white */
.portal-nav-link.active.show {
    background-color: #ffffff !important;
    color: #2f86dd !important;
}

/* Dropdown menu polish */
.portal-nav-dropdown-menu {
    border: 1px solid #e4e6ef;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 6px;
    min-width: 185px;
}

.portal-nav-dropdown-menu .dropdown-item {
    display: flex; /* Audit P1 #4 — align overlay icons */
    align-items: center;
    gap: 10px;
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #3f4254;
    border-radius: 4px;
    padding: 8px 12px;
}

/* Audit P1 #4 — normalize icon centering across plug/chart-line/video glyphs */
.portal-nav-dropdown-menu .dropdown-item > i {
    width: 18px;
    flex-shrink: 0;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    color: #2f86dd;
}

.portal-nav-dropdown-menu .dropdown-item:hover {
    background-color: rgba(47, 134, 221, 0.08);
    color: #2f86dd;
}

.portal-nav-dropdown-menu .dropdown-item.active,
.portal-nav-dropdown-menu .dropdown-item.active:focus,
.portal-nav-dropdown-menu .dropdown-item.active:hover {
    background-color: #eaf3fc !important;
    color: #2f86dd !important;
    font-weight: 600 !important;
    border-left: 3px solid #2f86dd !important;
    padding-left: 9px !important;
}

/* ── Build With AI nav item ─────────────────────────────────────────────── */
.portal-nav-ai {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding-right: 12px !important;
}
.portal-nav-beta {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 6px;
    line-height: 14px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* ── Nav spacing — ensure all 4 items are evenly spaced ─────────────────── */
.navbar-nav.mx-auto {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── FAQ nav item — tighter padding to compensate for short label ── */
a.portal-nav-link[href*="faq"],
a.portal-nav-link[href*="Faq"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* ── FAQ nav — min-width so it doesn't look stranded next to wider items ── */
.portal-nav-faq {
    min-width: 90px !important;
    text-align: center !important;
    justify-content: center !important;
    display: inline-flex !important;
}

/* ── Build With AI — right-side CTA button ───────────────────────────────── */
.portal-nav-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.5);
    border-radius: 6px;
    padding: 6px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #fbbf24 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.portal-nav-ai-btn:hover {
    background: rgba(245, 158, 11, 0.25);
    border-color: rgba(245, 158, 11, 0.7);
    color: #fbbf24 !important;
    text-decoration: none !important;
}
.portal-nav-ai-btn.active {
    background: rgba(245, 158, 11, 0.3) !important;
    border-color: #f59e0b !important;
}
.portal-nav-ai-btn i {
    font-size: 11px;
}


/* ── True 3-zone navbar: logo | nav-center | right-cluster ───────────────── */
/* Use grid on the collapse container so left/right zones don't affect center */
#navbarNav {
    display: flex !important;
    flex: 1 !important;
    align-items: center !important;
    justify-content: space-between !important;
}
#navbarNav .navbar-nav.mx-auto {
    flex: 0 1 auto !important;
    justify-content: center !important;
    display: flex !important;
    flex-direction: row !important;
    margin: 0 auto !important;
}
#navbarNav > div:last-child {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}


/* ── Copy for LLM — prevent wrapping on long endpoint titles ── */
.btn-copy-llm {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: background 0.15s, border-color 0.15s !important;
}

/* ═══════════════════════════════════════════════════════
   Ask AI Drawer
═══════════════════════════════════════════════════════ */
.btn-ask-ai {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: background 0.15s, border-color 0.15s !important;
    line-height: 1.5 !important;
    color: #92400e !important;
    background: #fffbeb !important;
    border: 1px solid #fcd34d !important;
    box-shadow: none !important;
    text-decoration: none !important;
    outline: none !important;
}
.btn-ask-ai:hover { background: #fef3c7 !important; border-color: #f59e0b !important; }
.btn-ask-ai i { font-size: 11px !important; color: #f59e0b !important; }
.ask-ai-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.15);
    z-index: 1040;
}
.ask-ai-drawer {
    position: fixed;
    top: 64px; right: 0; bottom: 0;
    width: 380px;
    background: #fff;
    border-left: 1px solid #e4e6ef;
    box-shadow: -4px 0 24px rgba(0,0,0,0.08);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    font-size: 13px;
}
.ask-ai-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #f0f1f5;
    flex-shrink: 0;
}
.ask-ai-drawer-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}
.ask-ai-drawer-close {
    background: none; border: none;
    font-size: 20px; color: #94a3b8;
    cursor: pointer; line-height: 1; padding: 0 4px;
}
.ask-ai-drawer-close:hover { color: #475569; }
.ask-ai-context-badge {
    padding: 8px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #f0f1f5;
    font-size: 11px;
    color: #64748b;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ask-ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ask-ai-welcome { color: #64748b; font-size: 13px; line-height: 1.6; padding: 8px 0; }
.ask-ai-msg { display: flex; flex-direction: column; gap: 2px; max-width: 100%; }
.ask-ai-msg-user .ask-ai-bubble {
    background: #2f86dd; color: #fff;
    align-self: flex-end;
    border-radius: 12px 12px 2px 12px;
}
.ask-ai-msg-ai .ask-ai-bubble {
    background: #f1f5f9; color: #1e293b;
    align-self: flex-start;
    border-radius: 12px 12px 12px 2px;
}
.ask-ai-bubble {
    padding: 9px 13px; font-size: 13px; line-height: 1.6;
    max-width: 92%; word-break: break-word;
}
.ask-ai-bubble code {
    background: rgba(0,0,0,0.08); padding: 1px 4px;
    border-radius: 3px; font-size: 11.5px;
}
.ask-ai-thinking {
    display: flex; gap: 4px; align-items: center;
    padding: 10px 13px; background: #f1f5f9;
    border-radius: 12px 12px 12px 2px; align-self: flex-start;
}
.ask-ai-thinking span {
    width: 6px; height: 6px; background: #94a3b8;
    border-radius: 50%; animation: ai-pulse 1.2s infinite;
}
.ask-ai-thinking span:nth-child(2) { animation-delay: 0.2s; }
.ask-ai-thinking span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-pulse {
    0%,80%,100% { opacity: 0.3; transform: scale(0.85); }
    40% { opacity: 1; transform: scale(1); }
}
.ask-ai-input-row {
    display: flex; gap: 8px; padding: 12px 16px;
    border-top: 1px solid #f0f1f5; flex-shrink: 0; background: #fff;
}
.ask-ai-input {
    flex: 1; padding: 8px 10px; border: 1px solid #e2e8f0;
    border-radius: 8px; font-size: 13px; resize: none;
    font-family: inherit; line-height: 1.5; outline: none;
}
.ask-ai-input:focus { border-color: #2f86dd; }
.ask-ai-send-btn {
    width: 36px; height: 36px; background: #2f86dd;
    border: none; border-radius: 8px; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; align-self: flex-end; transition: background 0.15s;
}
.ask-ai-send-btn:hover { background: #1e6dbb; }
.ask-ai-send-btn:disabled { background: #cbd5e1; cursor: not-allowed; }

/* Nav user dropdown — pointer cursor, hide legacy arrow icon */
#navbarDropdownMenuLink { cursor: pointer; }
.fa-dropdown-1 { display: none; }


/* Audit P3 — Decouple expanded state from current/active state */
.partner-list[aria-expanded="true"]:not(.is-current) {
    background-color: transparent !important;
}
.partner-list.is-current {
    background-color: #d5e7f8 !important;
    font-weight: 500 !important;
}
.portal-sidebar a.partner-focus.is-current-child {
    color: #2f86dd !important;
    font-weight: 500 !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v=28 BUNDLE — DSGN-440 / DSGN-500 Round 2 follow-ups
   ═══════════════════════════════════════════════════════════════════ */

/* Issue A — chevron rendered hidden in v=34 (was breaking visual rhythm of an otherwise symmetric nav row).
   Camouflage and margin rules retained for safety in case display: none is later removed. */
.portal-nav-chevron {
    display: none !important;
    color: currentColor !important;
    margin-left: 2px !important;
}

/* Issue B — Equal-width nav items (v=35: dropdown wrapper resists flex due to Bootstrap nav-item min-content math; force fixed width to match the other three items at 185px) */
.navbar-nav {
    width: 720px !important;
    max-width: 100% !important;
}
.navbar-nav > .portal-nav-link,
.navbar-nav > .nav-item {
    flex: 1 1 0 !important;
    text-align: center !important;
}
.navbar-nav > .nav-item.dropdown {
    width: 185px !important;
    min-width: 185px !important;
    flex: 0 0 185px !important;
}

/* Issue C — Sticky navbar fix (override Metronic body height: 100%) */
body, html {
    height: auto !important;
    min-height: 100vh !important;
}

/* Audit point 4 Option β — left-border accent on active children + stable padding */
.portal-sidebar a.partner-focus {
    padding-left: 8px;
}
.portal-sidebar a.partner-focus.is-current-child {
    border-left: 3px solid #2f86dd !important;
    padding-left: 5px !important;
}

/* Page 4 Issue 1 Fix A — defensive !important so .collapsed wins over inline width */
.api-sidebar.collapsed {
    width: 0 !important;
    min-width: 0 !important;
}

/* Page 4 Issue 1 Fix C — keep collapse toggle reachable when sidebar is collapsed */
.api-sidebar.collapsed .sidebar-collapse-btn {
    position: fixed;
    left: 8px;
    top: 92px;
    z-index: 100;
    background: rgb(242, 243, 247);
    border: 1px solid rgb(228, 230, 239);
    border-radius: 4px;
    width: 32px;
    height: 32px;
}


/* Page 4 Issue 2b — match Resources sidebar active styling to Home left-border accent (v=36)
   Existing CSS painted .sidebar-endpoint.active as a solid blue pill (white text on blue).
   Audit calls for consistency with Home's .is-current-child styling (left-border accent).
   Endpoints: base padding-left 28px → active 25px + 3px border. Schemas: 24px → 21px + 3px border. */
.api-sidebar .sidebar-endpoint.active {
    background: transparent !important;
    color: rgb(47, 134, 221) !important;
    font-weight: 500 !important;
    border-left: 3px solid rgb(47, 134, 221) !important;
    padding-left: 25px !important;
}
.api-sidebar .sidebar-schema-item.active {
    color: rgb(47, 134, 221) !important;
    font-weight: 600 !important;
    border-left: 3px solid rgb(47, 134, 221) !important;
    padding-left: 21px !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v=37 — DSGN-500 Round 2 Page 5 fixes
   ═══════════════════════════════════════════════════════════════════ */

/* Page 5 Issue 4 — hide expand controls everywhere.
   Investigation showed 0 of 138 expand buttons are necessary on the current page:
   every .code-block has scrollHeight === clientHeight (no overflow). The collapse
   feature was never functionally wired up — .code-block-wrap has no max-height/
   overflow:hidden CSS, so nothing is clipped and the button has nothing to expand.
   Hiding via CSS rather than removing markup so the JS infrastructure remains
   available if responses ever genuinely overflow and the feature gets re-enabled. */
.code-expand-btn {
    display: none !important;
}

/* Page 5 Issue 2 — unify Resources page header buttons (API v1 selector → Copy All style).
   Copy All Endpoints for LLM and per-endpoint Copy for LLM use 1px #e2e8f0 / 6px / 30h.
   API v1 selector previously had 0px border / 0 radius. Bring it into line.
   Authorize button is already close to the target style (left untouched). */
.api-version-dropdown-wrap {
    border: 1px solid rgb(226, 232, 240) !important;
    border-radius: 6px !important;
    height: 30px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ── DSGN-500 Round 3 — Page 1 audit (must-haves) ──────────
   Source: Figma "Partner Portal Audit" — Design Audit Round 3, Page 1
   Date: May 21, 2026
   ───────────────────────────────────────────────────── */

/* P1 #5 + #6 — center top-nav link labels.
   .portal-nav-link is inline-flex with align-items:center but lacks
   justify-content; text-align:center on the parent flex item does not
   propagate into the flex child. */
.portal-nav-link {
    justify-content: center !important;
}

/* P1 #1 + #2 — Getting Started page title vs section title swap.
   Audit: H1 (page title) should be 28px Semibold; H2 (section title)
   should be 26px Regular. Scope to the Home content container so we
   don't affect Resources/Programmatic page H1/H2. */
.portal-main .container-fluid h1,
.container-fluid h1#setting-up-a-basic-marketplace-integration {
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 36px !important;
}
.portal-main .container-fluid > div > h2,
.container-fluid > div > h2 {
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 32px !important;
    margin-top: 32px !important; /* P1 #3 — 32px section spacing */
}
/* Neutralize the <strong> wrapper inside the H2s so weight stays 400 */
.portal-main .container-fluid > div > h2 strong,
.container-fluid > div > h2 strong {
    font-weight: 400 !important;
}

/* P1 #4 (R3 follow-up) — tooltip positioning fix.
   .anchor-copy-tooltip uses position:absolute with bottom: calc(100% + 6px),
   which needs a positioned ancestor. The Font Awesome <i> icons that act as
   copy-link triggers default to position:static, so the tooltip walks up to
   <body> and renders thousands of pixels off-screen. Making the triggers
   position:relative establishes the positioning context, so the tooltip
   appears just above each icon as intended. */
a[href^="#"] .fa-link,
a[href^="#"] .fa-chain,
.anchor-link,
.chain-link,
[data-anchor-copy] {
    position: relative;
}

/* R3 P1 follow-up — remove residual navbar bottom hairline.
   portal-style.css's .line rule applies border-bottom: 1px solid rgb(228,230,239),
   which renders as a thin gray hairline at the bottom edge of the blue navbar,
   most visible at the corners outside the .mx-6 margin. The earlier v=28 navbar
   border removal targeted .navbar itself but missed the inner .line container. */
.navbar .line {
    border-bottom: 0 !important;
}