/* Swagger UI 自定义样式 - 与 Billing 页面保持一致 */
/* 导入 common.css 的 CSS 变量 */
@import url('/static/css/common.css?v=9.1');

:root {
    /* 使用 Common.css 的 CSS 变量 */
    --swagger-color-primary: var(--color-primary, #0066cc);
    --swagger-color-primary-hover: var(--color-primary-hover, #0052b3);
    --swagger-color-bg-base: var(--color-bg-base, #f5f5f5);
    --swagger-color-bg-card: var(--color-bg-card, #ffffff);
    --swagger-color-border: var(--color-border, #d9d9d9);
    --swagger-color-border-light: var(--color-border-light, #e8e8e8);
    --swagger-color-text-primary: var(--color-text-primary, #333333);
    --swagger-color-text-secondary: var(--color-text-secondary, #666666);
    --swagger-color-success: var(--color-success, #00b42a);
    --swagger-color-error: var(--color-error, #ff4d4f);
    --swagger-color-warning: var(--color-warning, #ffc440);
    --swagger-font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    --swagger-font-size-base: var(--font-size-base, 14px);
    --swagger-font-size-sm: var(--font-size-sm, 13px);
    --swagger-font-size-xs: var(--font-size-xs, 12px);
    --swagger-radius-md: var(--radius-md, 4px);
    --swagger-radius-lg: var(--radius-lg, 8px);
    --swagger-shadow-md: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.1));
}

/* 覆盖 Swagger UI 默认样式 */
.swagger-ui {
    font-family: var(--swagger-font-family) !important;
    font-size: var(--swagger-font-size-base) !important;
    background: var(--swagger-color-bg-base) !important;
}

/* 顶部栏 */
.swagger-ui .topbar {
    background: var(--swagger-color-bg-card) !important;
    border-bottom: 1px solid var(--swagger-color-border-light) !important;
    padding: var(--spacing-xl, 20px) var(--spacing-2xl, 24px) !important;
    box-shadow: var(--swagger-shadow-md) !important;
}

.swagger-ui .topbar-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.swagger-ui .topbar-wrapper .link {
    color: var(--swagger-color-text-primary) !important;
    font-size: var(--swagger-font-size-xl, 18px) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

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

/* 信息区域 */
.swagger-ui .information-container {
    background: var(--swagger-color-bg-card) !important;
    border: 1px solid var(--swagger-color-border-light) !important;
    border-radius: var(--swagger-radius-lg) !important;
    margin: var(--spacing-xl, 20px) 0 !important;
    padding: var(--spacing-2xl, 24px) !important;
    box-shadow: var(--swagger-shadow-md) !important;
}

.swagger-ui .info .title {
    color: var(--swagger-color-text-primary) !important;
    font-size: var(--swagger-font-size-xl, 18px) !important;
    font-weight: 600 !important;
    margin-bottom: var(--spacing-sm, 8px) !important;
}

.swagger-ui .info .description {
    color: var(--swagger-color-text-secondary) !important;
    font-size: var(--swagger-font-size-sm, 13px) !important;
    line-height: 1.5 !important;
    margin-bottom: var(--spacing-xl, 20px) !important;
}

/* 操作面板 */
.swagger-ui .opblock {
    background: var(--swagger-color-bg-card) !important;
    border: 1px solid var(--swagger-color-border-light) !important;
    border-radius: var(--swagger-radius-md) !important;
    margin-bottom: var(--spacing-md, 12px) !important;
    box-shadow: var(--swagger-shadow-md) !important;
    transition: all var(--transition-normal, 0.3s) ease !important;
}

.swagger-ui .opblock:hover {
    border-color: var(--swagger-color-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1) !important;
    transform: translateY(-2px) !important;
}

.swagger-ui .opblock-tag {
    color: var(--swagger-color-text-primary) !important;
    font-size: var(--swagger-font-size-lg, 16px) !important;
    font-weight: 600 !important;
    padding: var(--spacing-lg, 16px) var(--spacing-xl, 20px) !important;
    border-bottom: 1px solid var(--swagger-color-border-light) !important;
    background: var(--swagger-color-bg-header, #fafafa) !important;
}

.swagger-ui .opblock-summary {
    padding: var(--spacing-lg, 16px) var(--spacing-xl, 20px) !important;
}

.swagger-ui .opblock-summary-method {
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px) !important;
    border-radius: var(--swagger-radius-sm, 2px) !important;
    font-size: var(--swagger-font-size-sm, 13px) !important;
    font-weight: 600 !important;
    min-width: 60px !important;
    text-align: center !important;
}

/* HTTP 方法颜色 */
.swagger-ui .opblock.opblock-get .opblock-summary-method {
    background: #e6f7ff !important;
    color: #0066cc !important;
    border: 1px solid #91d5ff !important;
}

.swagger-ui .opblock.opblock-post .opblock-summary-method {
    background: #f6ffed !important;
    color: #52c41a !important;
    border: 1px solid #b7eb8f !important;
}

.swagger-ui .opblock.opblock-put .opblock-summary-method {
    background: #fff7e6 !important;
    color: #fa8c16 !important;
    border: 1px solid #ffd591 !important;
}

.swagger-ui .opblock.opblock-delete .opblock-summary-method {
    background: #fff2f0 !important;
    color: #ff4d4f !important;
    border: 1px solid #ffccc7 !important;
}

.swagger-ui .opblock-summary-path {
    color: var(--swagger-color-text-primary) !important;
    font-size: var(--swagger-font-size-base, 14px) !important;
    font-weight: 500 !important;
}

.swagger-ui .opblock-summary-description {
    color: var(--swagger-color-text-secondary) !important;
    font-size: var(--swagger-font-size-sm, 13px) !important;
}

/* 操作详情 */
.swagger-ui .opblock-body {
    padding: var(--spacing-xl, 20px) !important;
}

.swagger-ui .opblock-section-header {
    background: var(--swagger-color-bg-header, #fafafa) !important;
    border-bottom: 1px solid var(--swagger-color-border-light) !important;
    padding: var(--spacing-lg, 16px) var(--spacing-xl, 20px) !important;
}

.swagger-ui .tab {
    background: transparent !important;
    border: 1px solid var(--swagger-color-border) !important;
    color: var(--swagger-color-text-secondary) !important;
    padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px) !important;
    border-radius: var(--swagger-radius-md) !important;
    font-size: var(--swagger-font-size-sm, 13px) !important;
}

.swagger-ui .tab.active {
    background: var(--swagger-color-primary) !important;
    color: white !important;
    border-color: var(--swagger-color-primary) !important;
}

/* 参数和模型 */
.swagger-ui .parameters-container {
    margin-bottom: var(--spacing-xl, 20px) !important;
}

.swagger-ui .parameter__name {
    color: var(--swagger-color-text-primary) !important;
    font-weight: 600 !important;
    font-size: var(--swagger-font-size-sm, 13px) !important;
}

.swagger-ui .parameter__type {
    color: var(--swagger-color-text-secondary) !important;
    font-size: var(--swagger-font-size-xs, 12px) !important;
}

.swagger-ui .parameter__in {
    background: var(--swagger-color-bg-header, #fafafa) !important;
    color: var(--swagger-color-text-secondary) !important;
    padding: 2px 6px !important;
    border-radius: var(--swagger-radius-sm, 2px) !important;
    font-size: var(--swagger-font-size-xs, 12px) !important;
}

.swagger-ui .parameter__deprecated {
    color: var(--swagger-color-error) !important;
    font-size: var(--swagger-font-size-xs, 12px) !important;
}

/* 响应 */
.swagger-ui .responses-wrapper {
    border-top: 1px solid var(--swagger-color-border-light) !important;
    padding-top: var(--spacing-xl, 20px) !important;
    margin-top: var(--spacing-xl, 20px) !important;
}

.swagger-ui .response-col_status {
    color: var(--swagger-color-text-primary) !important;
    font-weight: 600 !important;
    font-size: var(--swagger-font-size-sm, 13px) !important;
}

.swagger-ui .response-col_status .response-undocumented {
    color: var(--swagger-color-text-secondary) !important;
    font-size: var(--swagger-font-size-xs, 12px) !important;
}

/* 按钮 */
.swagger-ui .btn {
    background: var(--swagger-color-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--swagger-radius-md) !important;
    padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px) !important;
    font-size: var(--swagger-font-size-sm, 13px) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all var(--transition-normal, 0.3s) ease !important;
}

.swagger-ui .btn:hover {
    background: var(--swagger-color-primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.2) !important;
}

.swagger-ui .btn.execute {
    background: var(--swagger-color-success) !important;
}

.swagger-ui .btn.execute:hover {
    background: #52c41a !important;
}

/* 输入框 */
.swagger-ui input[type="text"],
.swagger-ui input[type="password"],
.swagger-ui textarea,
.swagger-ui select {
    border: 1px solid var(--swagger-color-border) !important;
    border-radius: var(--swagger-radius-md) !important;
    padding: var(--spacing-sm, 8px) var(--spacing-md, 12px) !important;
    font-size: var(--swagger-font-size-sm, 13px) !important;
    background: var(--swagger-color-bg-card) !important;
    color: var(--swagger-color-text-primary) !important;
}

.swagger-ui input[type="text"]:focus,
.swagger-ui input[type="password"]:focus,
.swagger-ui textarea:focus,
.swagger-ui select:focus {
    border-color: var(--swagger-color-primary) !important;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1) !important;
    outline: none !important;
}

/* 表格 */
.swagger-ui table {
    border-collapse: collapse !important;
    width: 100% !important;
}

.swagger-ui table th {
    background: var(--swagger-color-bg-header, #fafafa) !important;
    padding: var(--spacing-md, 12px) var(--spacing-lg, 16px) !important;
    border-bottom: 2px solid var(--swagger-color-border) !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: var(--swagger-font-size-sm, 13px) !important;
    color: var(--swagger-color-text-primary) !important;
}

.swagger-ui table td {
    padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px) !important;
    border-bottom: 1px solid var(--swagger-color-border-light) !important;
    font-size: var(--swagger-font-size-sm, 13px) !important;
    color: var(--swagger-color-text-secondary) !important;
}

.swagger-ui table tr:hover td {
    background: var(--swagger-color-bg-hover, #f0f7ff) !important;
}

/* 响应码徽章 */
.swagger-ui .response-col_status .response-200,
.swagger-ui .response-col_status .response-201,
.swagger-ui .response-col_status .response-204 {
    background: #f6ffed !important;
    color: #52c41a !important;
    border: 1px solid #b7eb8f !important;
    padding: 2px 8px !important;
    border-radius: var(--swagger-radius-sm, 2px) !important;
    font-size: var(--swagger-font-size-xs, 12px) !important;
    font-weight: 500 !important;
}

.swagger-ui .response-col_status .response-400,
.swagger-ui .response-col_status .response-401,
.swagger-ui .response-col_status .response-403,
.swagger-ui .response-col_status .response-404,
.swagger-ui .response-col_status .response-500 {
    background: #fff2f0 !important;
    color: #ff4d4f !important;
    border: 1px solid #ffccc7 !important;
    padding: 2px 8px !important;
    border-radius: var(--swagger-radius-sm, 2px) !important;
    font-size: var(--swagger-font-size-xs, 12px) !important;
    font-weight: 500 !important;
}

/* 模型和示例 */
.swagger-ui .model-box {
    background: var(--swagger-color-bg-header, #fafafa) !important;
    border: 1px solid var(--swagger-color-border-light) !important;
    border-radius: var(--swagger-radius-md) !important;
    padding: var(--spacing-lg, 16px) !important;
    margin-bottom: var(--spacing-md, 12px) !important;
}

.swagger-ui .model-title {
    color: var(--swagger-color-text-primary) !important;
    font-weight: 600 !important;
    font-size: var(--swagger-font-size-sm, 13px) !important;
    margin-bottom: var(--spacing-sm, 8px) !important;
}

/* 代码块 */
.swagger-ui .microlight {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
    font-size: var(--swagger-font-size-xs, 12px) !important;
    background: var(--swagger-color-bg-header, #fafafa) !important;
    border: 1px solid var(--swagger-color-border-light) !important;
    border-radius: var(--swagger-radius-md) !important;
    padding: var(--spacing-md, 12px) !important;
}

/* 滚动条 */
.swagger-ui ::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

.swagger-ui ::-webkit-scrollbar-track {
    background: var(--swagger-color-bg-header, #fafafa) !important;
    border-radius: 4px !important;
}

.swagger-ui ::-webkit-scrollbar-thumb {
    background: var(--swagger-color-border) !important;
    border-radius: 4px !important;
}

.swagger-ui ::-webkit-scrollbar-thumb:hover {
    background: var(--swagger-color-text-secondary) !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .swagger-ui .topbar {
        padding: var(--spacing-lg, 16px) !important;
    }
    
    .swagger-ui .information-container {
        padding: var(--spacing-xl, 20px) var(--spacing-lg, 16px) !important;
        margin: var(--spacing-lg, 16px) 0 !important;
    }
    
    .swagger-ui .opblock-tag,
    .swagger-ui .opblock-summary {
        padding: var(--spacing-md, 12px) var(--spacing-lg, 16px) !important;
    }
    
    .swagger-ui .opblock-body {
        padding: var(--spacing-lg, 16px) !important;
    }
    
    .swagger-ui .opblock-section-header {
        padding: var(--spacing-md, 12px) var(--spacing-lg, 16px) !important;
    }
    
    .swagger-ui table th,
    .swagger-ui table td {
        padding: var(--spacing-sm, 8px) var(--spacing-md, 12px) !important;
    }
}