/* ============================================
   PS2 CHALLENGE SWAGGER UI CUSTOM THEME
   Matches site's dark theme with pink/purple gradients
   ============================================ */

:root {
    --swagger-primary: #e91e63;
    --swagger-primary-dark: #c2185b;
    --swagger-secondary: #9c27b0;
    --swagger-accent: #ff9800;
    --swagger-bg-dark: #0a0a0a;
    --swagger-bg-card: #1a1a1a;
    --swagger-text-primary: #ffffff;
    --swagger-text-secondary: #b0b0b0;
    --swagger-border: #2a2a2a;
}

/* ============================================
   BASE OVERRIDES
   ============================================ */
.swagger-ui {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    background-color: var(--swagger-bg-dark) !important;
    color: var(--swagger-text-primary) !important;
}

/* Grid background pattern like main site */
.swagger-ui .wrapper {
    background-color: var(--swagger-bg-dark) !important;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(233, 30, 99, 0.03) 2px,
            rgba(233, 30, 99, 0.03) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(156, 39, 176, 0.03) 2px,
            rgba(156, 39, 176, 0.03) 4px
        ) !important;
}

/* ============================================
   HEADER / INFO SECTION
   ============================================ */
.swagger-ui .info {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.1) 0%, rgba(156, 39, 176, 0.1) 100%) !important;
    border: 1px solid var(--swagger-border) !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    margin-bottom: 2rem !important;
    box-shadow: 0 8px 32px rgba(233, 30, 99, 0.2) !important;
}

.swagger-ui .info .title {
    color: var(--swagger-text-primary) !important;
    font-size: 2.5rem !important;
    margin-bottom: 1rem !important;
    background: linear-gradient(135deg, var(--swagger-primary) 0%, var(--swagger-secondary) 50%, var(--swagger-accent) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Version badge - make it visible */
.swagger-ui .info .title small {
    background: var(--swagger-bg-card) !important;
    color: var(--swagger-text-secondary) !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    vertical-align: middle !important;
    margin-left: 1rem !important;
    border: 1px solid var(--swagger-border) !important;
    -webkit-text-fill-color: var(--swagger-text-secondary) !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
}

.swagger-ui .info .title small.version-stamp {
    background: var(--swagger-bg-card) !important;
    color: var(--swagger-text-secondary) !important;
}

.swagger-ui .info .description,
.swagger-ui .info p {
    color: var(--swagger-text-secondary) !important;
    line-height: 1.6 !important;
}

.swagger-ui .info a {
    color: var(--swagger-primary) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.swagger-ui .info a:hover {
    color: var(--swagger-accent) !important;
    text-shadow: 0 0 10px rgba(255, 152, 0, 0.5) !important;
}

/* ============================================
   SCHEMES & BASE URL
   ============================================ */
.swagger-ui .scheme-container {
    background: var(--swagger-bg-card) !important;
    border: 1px solid var(--swagger-border) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    margin-bottom: 2rem !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Fix for the schemes wrapper area background */
.swagger-ui .scheme-container .schemes {
    background: transparent !important;
}

.swagger-ui .scheme-container .schemes-server-container {
    background: transparent !important;
}

.swagger-ui .schemes-server-container {
    background: transparent !important;
}

.swagger-ui .wrapper .block.col-12 {
    background: transparent !important;
}

.swagger-ui .wrapper .col-12 .scheme-container {
    background: var(--swagger-bg-card) !important;
}

.swagger-ui .scheme-container .schemes > label {
    color: var(--swagger-text-primary) !important;
}

.swagger-ui .scheme-container select {
    background: var(--swagger-bg-dark) !important;
    color: var(--swagger-text-primary) !important;
    border: 2px solid var(--swagger-border) !important;
    border-radius: 6px !important;
    padding: 0.5rem !important;
}

/* ============================================
   OPERATIONS / ENDPOINTS
   ============================================ */
.swagger-ui .opblock {
    background: var(--swagger-bg-card) !important;
    border: 1px solid var(--swagger-border) !important;
    border-radius: 12px !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.swagger-ui .opblock:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(233, 30, 99, 0.2) !important;
    border-color: var(--swagger-primary) !important;
}

/* HTTP Method Colors with Gradients */
.swagger-ui .opblock.opblock-get {
    border-left: 4px solid #61affe !important;
    background: linear-gradient(90deg, rgba(97, 175, 254, 0.1) 0%, var(--swagger-bg-card) 20%) !important;
}

.swagger-ui .opblock.opblock-post {
    border-left: 4px solid #49cc90 !important;
    background: linear-gradient(90deg, rgba(73, 204, 144, 0.1) 0%, var(--swagger-bg-card) 20%) !important;
}

.swagger-ui .opblock.opblock-put {
    border-left: 4px solid #fca130 !important;
    background: linear-gradient(90deg, rgba(252, 161, 48, 0.1) 0%, var(--swagger-bg-card) 20%) !important;
}

.swagger-ui .opblock.opblock-delete {
    border-left: 4px solid #f93e3e !important;
    background: linear-gradient(90deg, rgba(249, 62, 62, 0.1) 0%, var(--swagger-bg-card) 20%) !important;
}

.swagger-ui .opblock.opblock-patch {
    border-left: 4px solid #50e3c2 !important;
    background: linear-gradient(90deg, rgba(80, 227, 194, 0.1) 0%, var(--swagger-bg-card) 20%) !important;
}

/* Operation Summary */
.swagger-ui .opblock .opblock-summary {
    background: transparent !important;
    border: none !important;
    padding: 1rem 1.5rem !important;
}

/* HTTP Method Badges - Keep standard Swagger colors, just style the text */
.swagger-ui .opblock .opblock-summary-method {
    color: white !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
    min-width: 80px !important;
    padding: 6px 15px !important;
    text-align: center !important;
    font-size: 14px !important;
    font-family: sans-serif !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) !important;
}

/* Don't override the background colors - let Swagger's default colors show */
.swagger-ui .opblock-get .opblock-summary-method {
    background: #61affe !important;
}

.swagger-ui .opblock-post .opblock-summary-method {
    background: #49cc90 !important;
}

.swagger-ui .opblock-put .opblock-summary-method {
    background: #fca130 !important;
}

.swagger-ui .opblock-delete .opblock-summary-method {
    background: #f93e3e !important;
}

.swagger-ui .opblock-patch .opblock-summary-method {
    background: #50e3c2 !important;
}

.swagger-ui .opblock-options .opblock-summary-method {
    background: #0d5aa7 !important;
}

.swagger-ui .opblock-head .opblock-summary-method {
    background: #9012fe !important;
}

.swagger-ui .opblock .opblock-summary-path,
.swagger-ui .opblock .opblock-summary-path__deprecated {
    color: var(--swagger-text-primary) !important;
    font-weight: 600 !important;
}

.swagger-ui .opblock .opblock-summary-description {
    color: var(--swagger-text-secondary) !important;
}

/* Operation Details */
.swagger-ui .opblock-body {
    background: rgba(10, 10, 10, 0.5) !important;
    padding: 1.5rem !important;
    border-top: 2px solid var(--swagger-border) !important;
}

/* ============================================
   PARAMETERS & REQUEST BODY
   ============================================ */
.swagger-ui .parameters-col_description {
    color: var(--swagger-text-secondary) !important;
}

.swagger-ui .parameter__name {
    color: var(--swagger-primary) !important;
    font-weight: 600 !important;
}

.swagger-ui .parameter__type {
    color: var(--swagger-accent) !important;
}

.swagger-ui table thead tr th,
.swagger-ui table thead tr td {
    background: linear-gradient(135deg, var(--swagger-primary) 0%, var(--swagger-secondary) 100%) !important;
    color: white !important;
    border: none !important;
    padding: 1rem !important;
    font-weight: 600 !important;
}

.swagger-ui table tbody tr td {
    background: var(--swagger-bg-card) !important;
    color: var(--swagger-text-secondary) !important;
    border-bottom: 1px solid var(--swagger-border) !important;
    padding: 1rem !important;
}

.swagger-ui table tbody tr:hover {
    background: rgba(233, 30, 99, 0.1) !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.swagger-ui .btn {
    background: linear-gradient(135deg, var(--swagger-primary) 0%, var(--swagger-secondary) 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.75rem 2rem !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3) !important;
    transition: all 0.3s ease !important;
}

.swagger-ui .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(233, 30, 99, 0.4) !important;
}

.swagger-ui .btn.cancel {
    background: var(--swagger-bg-dark) !important;
    border: 2px solid var(--swagger-border) !important;
    box-shadow: none !important;
}

/* ============================================
   RESPONSES
   ============================================ */
.swagger-ui .responses-inner h4,
.swagger-ui .responses-inner h5 {
    color: var(--swagger-text-primary) !important;
    border-bottom: 2px solid var(--swagger-primary) !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1rem !important;
}

.swagger-ui .response-col_status {
    color: var(--swagger-primary) !important;
    font-weight: 600 !important;
}

.swagger-ui .response-col_description {
    color: var(--swagger-text-secondary) !important;
}

/* Response Codes */
.swagger-ui .response-col_status {
    border-radius: 6px !important;
    padding: 0.25rem 0.75rem !important;
}

/* ============================================
   CODE BLOCKS & SYNTAX HIGHLIGHTING
   ============================================ */
.swagger-ui .highlight-code,
.swagger-ui .microlight {
    background: var(--swagger-bg-dark) !important;
    border: 1px solid var(--swagger-border) !important;
    border-radius: 8px !important;
    color: var(--swagger-text-primary) !important;
    padding: 1rem !important;
}

.swagger-ui .model-box,
.swagger-ui section.models {
    background: var(--swagger-bg-card) !important;
    border: 1px solid var(--swagger-border) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-top: 2rem !important;
}

.swagger-ui section.models h4 {
    color: var(--swagger-text-primary) !important;
    background: linear-gradient(135deg, var(--swagger-primary) 0%, var(--swagger-secondary) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
}

.swagger-ui section.models .model-container {
    background: rgba(10, 10, 10, 0.5) !important;
    border: 1px solid var(--swagger-border) !important;
    border-radius: 8px !important;
    margin-bottom: 1rem !important;
}

.swagger-ui .model-title {
    color: var(--swagger-primary) !important;
    font-weight: 600 !important;
}

.swagger-ui .model {
    color: var(--swagger-text-secondary) !important;
}

.swagger-ui .prop-type {
    color: var(--swagger-accent) !important;
}

.swagger-ui .prop-format {
    color: var(--swagger-text-secondary) !important;
}

/* ============================================
   INPUTS & FORMS
   ============================================ */
.swagger-ui input[type=text],
.swagger-ui input[type=password],
.swagger-ui input[type=email],
.swagger-ui textarea,
.swagger-ui select {
    background: var(--swagger-bg-dark) !important;
    color: var(--swagger-text-primary) !important;
    border: 2px solid var(--swagger-border) !important;
    border-radius: 8px !important;
    padding: 0.75rem !important;
    transition: all 0.3s ease !important;
}

.swagger-ui input[type=text]:focus,
.swagger-ui input[type=password]:focus,
.swagger-ui input[type=email]:focus,
.swagger-ui textarea:focus,
.swagger-ui select:focus {
    outline: none !important;
    border-color: var(--swagger-primary) !important;
    box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.2) !important;
}

/* ============================================
   SCROLLBAR
   ============================================ */
.swagger-ui ::-webkit-scrollbar {
    width: 12px !important;
    height: 12px !important;
}

.swagger-ui ::-webkit-scrollbar-track {
    background: var(--swagger-bg-dark) !important;
}

.swagger-ui ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--swagger-primary) 0%, var(--swagger-secondary) 100%) !important;
    border-radius: 6px !important;
}

.swagger-ui ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--swagger-primary-dark) 0%, var(--swagger-primary) 100%) !important;
}

/* ============================================
   AUTHORIZATION
   ============================================ */
.swagger-ui .auth-wrapper {
    background: var(--swagger-bg-card) !important;
    border: 1px solid var(--swagger-border) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-bottom: 2rem !important;
}

.swagger-ui .auth-wrapper .btn.authorize {
    background: linear-gradient(135deg, var(--swagger-primary) 0%, var(--swagger-secondary) 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 30px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3) !important;
    margin: 0 !important;
    line-height: normal !important;
}

.swagger-ui .auth-wrapper .btn.authorize svg {
    fill: white !important;
}

/* Authorize button in the top right */
.swagger-ui .authorization__btn {
    background: linear-gradient(135deg, var(--swagger-primary) 0%, var(--swagger-secondary) 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 30px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3) !important;
    transition: all 0.3s ease !important;
}

.swagger-ui .authorization__btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(233, 30, 99, 0.4) !important;
}

.swagger-ui .authorization__btn svg {
    fill: white !important;
}

/* Locked/Unlocked state styling */
.swagger-ui .authorization__btn.locked {
    opacity: 1 !important;
}

.swagger-ui .authorization__btn.unlocked {
    opacity: 0.8 !important;
}

.swagger-ui .modal-ux {
    background: rgba(0, 0, 0, 0.8) !important;
}

.swagger-ui .modal-ux-content {
    background: var(--swagger-bg-card) !important;
    border: 1px solid var(--swagger-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(233, 30, 99, 0.5) !important;
}

.swagger-ui .modal-ux-header {
    background: linear-gradient(135deg, var(--swagger-primary) 0%, var(--swagger-secondary) 100%) !important;
    color: white !important;
    border-bottom: 2px solid var(--swagger-border) !important;
}

/* ============================================
   TOPBAR (if using)
   ============================================ */
.swagger-ui .topbar {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(10, 10, 10, 0.98) 100%) !important;
    border-bottom: 2px solid var(--swagger-primary) !important;
    box-shadow: 0 2px 20px rgba(233, 30, 99, 0.3) !important;
}

.swagger-ui .topbar .wrapper {
    padding: 1rem !important;
}

.swagger-ui .topbar a {
    color: var(--swagger-primary) !important;
}

/* ============================================
   TAGS / SECTIONS
   ============================================ */
.swagger-ui .opblock-tag {
    color: var(--swagger-text-primary) !important;
    font-size: 1.5rem !important;
    border-bottom: 3px solid var(--swagger-primary) !important;
    padding-bottom: 0.5rem !important;
    margin: 2rem 0 1rem !important;
    background: linear-gradient(135deg, var(--swagger-primary) 0%, var(--swagger-secondary) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.swagger-ui .opblock-tag-section {
    margin-bottom: 2rem !important;
}

/* ============================================
   LINKS
   ============================================ */
.swagger-ui a {
    color: var(--swagger-primary) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.swagger-ui a:hover {
    color: var(--swagger-accent) !important;
    text-shadow: 0 0 10px rgba(255, 152, 0, 0.5) !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .swagger-ui .info .title {
        font-size: 2rem !important;
    }

    .swagger-ui .opblock {
        margin-bottom: 1rem !important;
    }

    .swagger-ui .btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
}

/* ============================================
   BADGES
   ============================================ */
.swagger-ui .opblock-tag .info {
    background: linear-gradient(135deg, var(--swagger-primary) 0%, var(--swagger-secondary) 100%) !important;
    color: white !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

/* ============================================
   DEPRECATED ENDPOINTS
   ============================================ */
.swagger-ui .opblock.opblock-deprecated {
    opacity: 0.6 !important;
    border-left-color: #888 !important;
}

.swagger-ui .opblock-deprecated .opblock-summary-method {
    background: linear-gradient(135deg, #666 0%, #888 100%) !important;
}