/* ============================================
   Dinosoft API - Custom Swagger UI Theme
   ============================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---- ROOT VARIABLES ---- */
:root {
    --ds-purple: #4B0082;
    --ds-purple-light: #6B21A8;
    --ds-purple-soft: #f3e8ff;
    --ds-orange: #FF6600;
    --ds-orange-soft: #fff3e6;
}

/* ---- GLOBAL ---- */
body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
    background: #f8f7fc !important;
}

/* ---- HEADER / TOP BAR ---- */
.swagger-section .swagger-ui-wrap {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

#header {
    background: #fff !important;
    border-bottom: 2px solid #e8e5f0 !important;
    padding: 16px 0 !important;
    box-shadow: 0 1px 4px rgba(75, 0, 130, 0.06) !important;
}

#header .swagger-ui-wrap {
    display: flex;
    align-items: center;
}

/* Logo - hide original text, show custom via CSS */
#header a#logo {
    font-size: 0 !important;
    color: transparent !important;
    text-shadow: none !important;
    background: none !important;
    padding: 0 !important;
    text-decoration: none !important;
    line-height: 0 !important;
    overflow: hidden !important;
}

#header a#logo img {
    display: none !important;
}

#header a#logo span {
    display: none !important;
}

#header a#logo::after {
    content: 'Dinosoft API';
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--ds-purple) !important;
    letter-spacing: -0.5px;
    line-height: normal !important;
}

/* CRITICAL: Hide api_selector in header immediately via CSS
   so it never flashes in the header before JS moves it */
#header #api_selector {
    display: none !important;
}

/* Moved controls card styling */
#ds-api-controls input:focus {
    border-color: var(--ds-purple) !important;
    box-shadow: 0 0 0 3px rgba(75, 0, 130, 0.08) !important;
}

#ds-api-controls #explore:hover {
    box-shadow: 0 4px 12px rgba(75, 0, 130, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Info description - fix markdown not rendering */
.swagger-section .info .info_description pre {
    background: #f8f7fc !important;
    color: #1a1a2e !important;
    border: 1px solid #e8e5f0 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 0.84rem !important;
}

/* ---- INFO SECTION ---- */
.swagger-section .info {
    background: #fff !important;
    border: 1px solid #e8e5f0 !important;
    border-radius: 14px !important;
    padding: 28px 32px !important;
    margin: 24px 0 !important;
    box-shadow: 0 1px 3px rgba(75, 0, 130, 0.04) !important;
}

.swagger-section .info .info_title {
    color: var(--ds-purple) !important;
    font-weight: 800 !important;
    font-size: 1.6rem !important;
    letter-spacing: -0.5px;
}

.swagger-section .info .info_description,
.swagger-section .info .info_description p,
.swagger-section .info .info_description div {
    color: #64648c !important;
    font-size: 0.9rem !important;
    line-height: 1.8 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    white-space: pre-line !important;
}

.swagger-section .info .info_description strong,
.swagger-section .info .info_description b {
    color: var(--ds-purple) !important;
}

.swagger-section .info .info_description code,
.swagger-section .info .info_description pre {
    background: #f8f7fc !important;
    color: var(--ds-purple) !important;
    padding: 2px 8px !important;
    border-radius: 5px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    border: 1px solid #e8e5f0 !important;
}

/* Fix the purple/pink background on description */
.swagger-section .info .markdown,
.swagger-section .info .info_description .markdown {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* ---- RESOURCE GROUPS ---- */
.swagger-section .resource {
    margin-bottom: 16px !important;
}

.swagger-section ul#resources li.resource .heading {
    background: #fff !important;
    border: 1px solid #e8e5f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(75, 0, 130, 0.04) !important;
}

.swagger-section ul#resources li.resource .heading h2 {
    padding: 0 !important;
}

.swagger-section ul#resources li.resource .heading h2 a {
    color: var(--ds-purple) !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    padding: 16px 20px !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

.swagger-section ul#resources li.resource .heading ul.options li a {
    color: var(--ds-orange) !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-decoration: none !important;
}

/* ---- OPERATIONS ---- */
.swagger-section ul.endpoints li.endpoint ul.operations li.operation {
    margin: 0 0 2px !important;
}

.swagger-section ul.endpoints li.endpoint ul.operations li.operation .heading {
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid #e8e5f0 !important;
    margin: 6px 0 !important;
}

/* GET */
.swagger-section ul.endpoints li.endpoint ul.operations li.operation.get .heading {
    background: linear-gradient(135deg, #ecfdf5, #f0fdf4) !important;
    border-color: #bbf7d0 !important;
}

.swagger-section ul.endpoints li.endpoint ul.operations li.operation.get .heading h3 span.http_method a {
    background: #059669 !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 4px 14px !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    text-shadow: none !important;
}

/* POST */
.swagger-section ul.endpoints li.endpoint ul.operations li.operation.post .heading {
    background: linear-gradient(135deg, #fff7ed, #fffbeb) !important;
    border-color: #fed7aa !important;
}

.swagger-section ul.endpoints li.endpoint ul.operations li.operation.post .heading h3 span.http_method a {
    background: var(--ds-orange) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 4px 14px !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    text-shadow: none !important;
}

/* Path */
.swagger-section ul.endpoints li.endpoint ul.operations li.operation .heading h3 span.path a {
    color: var(--ds-text, #1a1a2e) !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    text-shadow: none !important;
    font-family: 'Consolas', 'SF Mono', monospace !important;
    padding-left: 8px !important;
}

/* Summary */
.swagger-section ul.endpoints li.endpoint ul.operations li.operation .heading h3 span.path a {
    text-decoration: none !important;
}

/* ---- OPERATION CONTENT ---- */
.swagger-section .operation-content {
    background: #fff !important;
    border: 1px solid #e8e5f0 !important;
    border-radius: 0 0 10px 10px !important;
    padding: 20px !important;
}

/* ---- PARAMETERS TABLE ---- */
.swagger-section table.fullwidth {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e8e5f0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.swagger-section table.fullwidth thead tr th {
    background: #f8f7fc !important;
    color: #64648c !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #e8e5f0 !important;
}

.swagger-section table.fullwidth tbody tr td {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f0eef5 !important;
    font-size: 0.85rem !important;
    color: #1a1a2e !important;
}

.swagger-section table.fullwidth tbody tr:last-child td {
    border-bottom: none !important;
}

/* Input fields */
.swagger-section input[type="text"],
.swagger-section textarea,
.swagger-section select {
    border: 1.5px solid #e8e5f0 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    background: #fff !important;
    transition: border-color 0.2s !important;
    outline: none !important;
}

.swagger-section input[type="text"]:focus,
.swagger-section textarea:focus {
    border-color: var(--ds-purple) !important;
    box-shadow: 0 0 0 3px rgba(75, 0, 130, 0.06) !important;
}

/* ---- BUTTONS ---- */
.swagger-section input[type="submit"],
.swagger-section input[type="button"],
.swagger-section .sandbox_header input.submit {
    background: linear-gradient(135deg, var(--ds-purple), var(--ds-purple-light)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 24px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    text-shadow: none !important;
    box-shadow: 0 2px 6px rgba(75, 0, 130, 0.15) !important;
    transition: all 0.2s !important;
    font-family: 'Inter', sans-serif !important;
}

.swagger-section input[type="submit"]:hover,
.swagger-section input[type="button"]:hover {
    box-shadow: 0 4px 12px rgba(75, 0, 130, 0.25) !important;
    transform: translateY(-1px) !important;
}

/* ---- RESPONSE ---- */
.swagger-section .response_body pre {
    background: #1a1a2e !important;
    color: #e2e0ea !important;
    border-radius: 10px !important;
    padding: 20px !important;
    font-size: 0.82rem !important;
    line-height: 1.7 !important;
    border: none !important;
    font-family: 'Consolas', 'SF Mono', monospace !important;
}

.swagger-section pre {
    background: #1a1a2e !important;
    color: #e2e0ea !important;
    border-radius: 10px !important;
    padding: 16px !important;
    font-size: 0.82rem !important;
    border: none !important;
}

/* Response codes */
.swagger-section .response_code {
    font-weight: 700 !important;
}

/* ---- MODEL SECTION ---- */
.swagger-section .model-signature .signature-nav a.selected {
    color: var(--ds-purple) !important;
    border-bottom: 2px solid var(--ds-purple) !important;
}

.swagger-section .model-signature .description .propName {
    font-weight: 600 !important;
    color: var(--ds-purple) !important;
}

/* ---- FOOTER ---- */
#footer {
    background: #fff !important;
    border-top: 1px solid #e8e5f0 !important;
    padding: 20px 0 !important;
    text-align: center !important;
    margin-top: 40px !important;
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f8f7fc; }
::-webkit-scrollbar-thumb { background: #d4d0e0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #b0a8c8; }

/* ---- SELECTION ---- */
::selection {
    background: rgba(75, 0, 130, 0.12);
    color: var(--ds-purple);
}

/* ---- LINKS ---- */
a {
    color: var(--ds-purple) !important;
}

a:hover {
    color: var(--ds-purple-light) !important;
}

/* ---- MISC ---- */
.swagger-section .toggleEndpointList,
.swagger-section .collapseResource {
    color: var(--ds-orange) !important;
}

/* Required label */
.swagger-section .required {
    color: var(--ds-orange) !important;
    font-weight: 700 !important;
}

/* Response Messages */
.swagger-section .response-messages h4 {
    color: var(--ds-purple) !important;
    font-weight: 700 !important;
}

/* Content type select */
.swagger-section .response-content-type select {
    border-radius: 8px !important;
    border: 1.5px solid #e8e5f0 !important;
    padding: 6px 10px !important;
}