/* ============================================================
   Crane Hook API — Custom Swagger UI Styles
   ============================================================ */

/* ── Top bar: brand colour ─────────────────────────────────── */
.swagger-ui .topbar {
    background-color: #1a1a2e;
}

/* ── Info block: compact ───────────────────────────────────── */
.swagger-ui .info {
    margin: 10px 0 0 0 !important;
}

.swagger-ui .info .main {
    padding: 0 !important;
}

/* Hide the raw description block entirely — JS rebuilds it */
.swagger-ui .info .description {
    display: none !important;
}

/* ── Info title: tighten spacing ───────────────────────────── */
.swagger-ui .info hgroup.main {
    margin: 0 0 6px 0;
}

.swagger-ui .info hgroup.main h2.title {
    font-size: 22px;
    margin: 0;
}

/* ── Accordion wrapper — matches controller tag style ──────── */
#api-info-accordion {
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    margin: 8px 0 14px 0;
    background: #fff;
    font-family: sans-serif;
}

/* The clickable header bar — mirrors .opblock-tag look */
#api-info-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 10px 10px;
    cursor: pointer;
    user-select: none;
    background: #fff;
    border-radius: 4px;
    transition: background 0.15s;
}

#api-info-accordion-header:hover {
    background: #f7f7f7;
}

#api-info-accordion-header .accordion-title {
    font-size: 14px;
    font-weight: 700;
    color: #3b4151;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
}

#api-info-accordion-header .accordion-title .info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1a1a2e;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* The SVG arrow — same pattern Swagger UI uses for tag groups */
#api-info-accordion-header .accordion-arrow {
    width: 20px;
    height: 20px;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

#api-info-accordion-header.is-collapsed .accordion-arrow {
    transform: rotate(-90deg);
}

/* The collapsible body panel */
#api-info-accordion-body {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    max-height: 1000px;
    opacity: 1;
    border-top: 1px solid #e8e8e8;
}

#api-info-accordion-body.is-collapsed {
    max-height: 0;
    opacity: 0;
    border-top: none;
}

/* Inner content padding */
#api-info-accordion-body .accordion-inner {
    padding: 14px 20px 16px 20px;
    font-size: 13px;
    line-height: 1.7;
    color: #3b4151;
}

/* Style the markdown content inside the accordion */
#api-info-accordion-body .accordion-inner h2 {
    font-size: 14px;
    font-weight: 700;
    margin: 14px 0 4px 0;
    color: #3b4151;
    border-bottom: 1px solid #eee;
    padding-bottom: 3px;
}

#api-info-accordion-body .accordion-inner h2:first-child {
    margin-top: 0;
}

#api-info-accordion-body .accordion-inner p {
    margin: 4px 0 8px 0;
}

#api-info-accordion-body .accordion-inner ul,
#api-info-accordion-body .accordion-inner ol {
    margin: 4px 0 8px 18px;
    padding: 0;
}

#api-info-accordion-body .accordion-inner li {
    margin-bottom: 2px;
}

#api-info-accordion-body .accordion-inner code {
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 12px;
    color: #6f42c1;
    font-family: monospace;
}

/* Scrollbar for the body */
#api-info-accordion-body::-webkit-scrollbar {
    width: 4px;
}
#api-info-accordion-body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

/* ── Section headers (operation tags) ──────────────────────── */
.swagger-ui .opblock-tag {
    font-size: 15px;
    font-weight: 700;
    border-bottom: 2px solid #e8e8e8;
    padding: 6px 10px;
}

/* ── Operation blocks ──────────────────────────────────────── */
.swagger-ui .opblock .opblock-summary {
    padding: 6px 10px;
}

.swagger-ui .opblock.opblock-get .opblock-summary-method {
    background-color: #0d6efd;
}

.swagger-ui .opblock.opblock-post .opblock-summary-method {
    background-color: #198754;
}

.swagger-ui .opblock.opblock-put .opblock-summary-method {
    background-color: #fd7e14;
}

.swagger-ui .opblock.opblock-patch .opblock-summary-method {
    background-color: #6f42c1;
}

.swagger-ui .opblock.opblock-delete .opblock-summary-method {
    background-color: #dc3545;
}

/* ── Response codes ────────────────────────────────────────── */
.swagger-ui .response-col_status {
    font-weight: 700;
}

/* ── Models section ────────────────────────────────────────── */
.swagger-ui section.models {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
}

/* ── Try it out button ─────────────────────────────────────── */
.swagger-ui .btn.try-out__btn {
    border-color: #0d6efd;
    color: #0d6efd;
}

/* ── Execute button ────────────────────────────────────────── */
.swagger-ui .btn.execute {
    background-color: #1a1a2e;
    border-color: #1a1a2e;
}

/* ── Request duration badge ────────────────────────────────── */
.swagger-ui .request-duration {
    font-size: 11px;
    color: #666;
}

/* ── Authorize button ──────────────────────────────────────── */
.swagger-ui .btn.authorize {
    color: #1a1a2e;
    border-color: #1a1a2e;
}

.swagger-ui .btn.authorize svg {
    fill: #1a1a2e;
}