/* Toggle Button Styles */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1000;
  padding: 8px;
  border-radius: 50%;
  color: white; /* Default to white for landing page gradient header */
  transition: background-color 0.3s;
}

/* In Swagger UI, the background is white by default, so we need dark icon */
body:not(.dark-mode) #swagger-ui ~ .theme-toggle {
  color: #333;
}

.theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

body:not(.dark-mode) #swagger-ui ~ .theme-toggle:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.sun-icon {
  display: block;
}

.moon-icon {
  display: none;
}

.dark-mode .sun-icon {
  display: none;
}

.dark-mode .moon-icon {
  display: block;
}

/* Landing Page Dark Mode Overrides */
body.dark-mode {
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
  color: #f7fafc;
}

body.dark-mode .api-card {
  background: #171923;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

body.dark-mode .api-card h2 {
  color: #f7fafc;
}

body.dark-mode .api-card p {
  color: #cbd5e0;
}

body.dark-mode .api-link {
  color: #90cdf4;
}

body.dark-mode .api-link:hover {
  color: #63b3ed;
}

/* Swagger UI Dark Mode Overrides */
/* Using CSS filter for a quick dark mode */
body.dark-mode #swagger-ui {
  filter: invert(88%) hue-rotate(180deg);
  background-color: #f0f0f0; /* Light bg becomes dark after invert */
}

body.dark-mode #swagger-ui .info {
  margin: 0px !important;
  padding: 50px 0px !important;
}

body.dark-mode #swagger-ui section.models {
  margin: 0px !important;
  padding: 50px 0px !important;
}

/* Re-invert specific things that broke */
body.dark-mode #swagger-ui .opblock-summary-method {
    filter: invert(100%) hue-rotate(180deg);
}

/* Version stamp - keep original green color in dark mode */
body.dark-mode #swagger-ui .info .title small.version-stamp {
  filter: invert(100%) hue-rotate(180deg);
  background-color: #89bf04 !important;
}

/* Microlight JSON code blocks - re-invert to cancel parent filter, then apply Monokai theme */
body.dark-mode #swagger-ui .opblock-body pre.microlight,
body.dark-mode #swagger-ui .highlight-code > .microlight {
  filter: invert(100%) hue-rotate(180deg);
  background: #272822 !important;
  color: #f8f8f2 !important;
}

/* Monokai colour overrides (applied after re-inversion, so colours are direct) */
body.dark-mode #swagger-ui .opblock-body pre.microlight span[style*="color: rgb(162, 252, 162)"],
body.dark-mode #swagger-ui .highlight-code > .microlight span[style*="color: rgb(162, 252, 162)"] {
  /* color: #e6db74 !important;  */
  color: #49cc90 !important;
}

/* Schema text colors - darker for better readability */
body.dark-mode #swagger-ui .model-title {
  color: #2d3748 !important;  /* dark gray */
}

body.dark-mode #swagger-ui .model {
  color: #4a5568 !important;  /* medium-dark gray */
}

body.dark-mode #swagger-ui .model .property {
  color: #1a202c !important;  /* very dark - for examples */
}

body.dark-mode #swagger-ui table.model tbody tr td {
  color: #2d3748 !important;  /* dark gray */
}

/* Scheme container - light gray background same as info section */
body.dark-mode #swagger-ui .scheme-container {
  background: #f0f0f0 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

/* Custom scrollbar for dark mode */
body.dark-mode::-webkit-scrollbar {
  width: 12px;
}

body.dark-mode::-webkit-scrollbar-track {
  background: #1a202c;
}

body.dark-mode::-webkit-scrollbar-thumb {
  background-color: #4a5568;
  border-radius: 6px;
  border: 3px solid #1a202c;
}