/**
 * BlackBox AgentAPI Swagger UI Theme
 * Custom styling for enhanced user experience
 */

/* Custom header styling */
.blackbox-custom-header {
  background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
  padding: 1rem 0;
  border-bottom: 1px solid #475569;
}

.blackbox-custom-header a:hover {
  color: white !important;
  transition: color 0.2s ease;
}

/* Operation complexity badges */
.operation-complexity {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}

.complexity-simple {
  background: #D1FAE5 !important;
  color: #065F46 !important;
  border-color: #A7F3D0 !important;
}

.complexity-moderate {
  background: #FEF3C7 !important;
  color: #92400E !important;
  border-color: #FDE68A !important;
}

.complexity-complex {
  background: #FEE2E2 !important;
  color: #991B1B !important;
  border-color: #FECACA !important;
}

/* Enhanced search input */
.api-search-container input:focus {
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Copy button styling */
.copy-button:hover {
  background: #4B5563 !important;
  transform: translateY(-1px);
}

/* Performance badge styling */
.performance-badge {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Method badges enhancement */
.swagger-ui .opblock .opblock-summary-method {
  border-radius: 0.375rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Enhanced operation blocks */
.swagger-ui .opblock {
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
  transition: all 0.2s ease !important;
}

.swagger-ui .opblock:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-1px) !important;
}

/* Enhanced responses */
.swagger-ui .responses-wrapper .responses .response .response-col_status {
  font-weight: 600 !important;
}

/* Schema styling */
.swagger-ui .model-container {
  border-radius: 0.5rem !important;
  border: 1px solid #E5E7EB !important;
}

/* Parameter styling */
.swagger-ui .parameters-container {
  border-radius: 0.5rem !important;
}

.swagger-ui .parameter__name {
  font-weight: 600 !important;
  color: #374151 !important;
}

/* Try it out button enhancement */
.swagger-ui .btn.try-out__btn {
  background: #3B82F6 !important;
  color: white !important;
  border-radius: 0.375rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.swagger-ui .btn.try-out__btn:hover {
  background: #2563EB !important;
  transform: translateY(-1px) !important;
}

/* Execute button enhancement */
.swagger-ui .btn.execute {
  background: #10B981 !important;
  color: white !important;
  border-radius: 0.375rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.swagger-ui .btn.execute:hover {
  background: #059669 !important;
  transform: translateY(-1px) !important;
}

/* Clear button enhancement */
.swagger-ui .btn.btn-clear {
  background: #6B7280 !important;
  color: white !important;
  border-radius: 0.375rem !important;
  font-weight: 500 !important;
}

.swagger-ui .btn.btn-clear:hover {
  background: #4B5563 !important;
}

/* Info section enhancement */
.swagger-ui .info {
  border-radius: 0.5rem !important;
  border: 1px solid #E5E7EB !important;
  background: #F9FAFB !important;
}

.swagger-ui .info .title {
  color: #111827 !important;
  font-weight: 700 !important;
}

.swagger-ui .info .description {
  color: #374151 !important;
  line-height: 1.6 !important;
}

/* Dark mode specific styles */
.dark-mode .swagger-ui .info {
  background: #1E293B !important;
  border-color: #334155 !important;
}

.dark-mode .swagger-ui .info .title {
  color: #F1F5F9 !important;
}

.dark-mode .swagger-ui .info .description {
  color: #CBD5E1 !important;
}

.dark-mode .swagger-ui .model-container {
  border-color: #475569 !important;
  background: #334155 !important;
}

.dark-mode .swagger-ui .parameter__name {
  color: #E2E8F0 !important;
}

/* Scrollbar styling */
.swagger-ui ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.swagger-ui ::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 4px;
}

.swagger-ui ::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}

.swagger-ui ::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

.dark-mode .swagger-ui ::-webkit-scrollbar-track {
  background: #334155;
}

.dark-mode .swagger-ui ::-webkit-scrollbar-thumb {
  background: #475569;
}

.dark-mode .swagger-ui ::-webkit-scrollbar-thumb:hover {
  background: #64748B;
}

/* Animation for loading states */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.loading {
  animation: pulse 2s ease-in-out infinite;
}

/* Responsive design */
@media (max-width: 768px) {
  .blackbox-custom-header > div {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  .blackbox-custom-header .shortcuts-info {
    display: none !important;
  }
}

/* Focus styles for accessibility */
.swagger-ui button:focus,
.swagger-ui input:focus,
.swagger-ui select:focus {
  outline: 2px solid #3B82F6 !important;
  outline-offset: 2px !important;
}