/* ==========================================================================
   app API — tema do Swagger UI
   Light mode por padrão · Dark mode via data-theme="dark" (toggle manual)
   e @media (prefers-color-scheme: dark) como fallback.

   Escopo: todos os seletores começam em `.swagger-ui` para o estilo não
   vazar para o resto da página. Carregado DEPOIS do CSS base do Swagger
   (ver app/templates/swagger/swagger_ui.html), por isso vence a cascata.

   Cores HTTP alinhadas com os padrões oficiais do Swagger UI:
   GET=#61affe  POST=#49cc90  PUT=#fca130  PATCH=#818cf8  DELETE=#f93e3e
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variáveis — LIGHT (padrão)
   -------------------------------------------------------------------------- */
.swagger-ui {
  --app-primary: #0ea5e9;
  --app-primary-hover: #0284c7;
  --app-primary-soft: rgba(14, 165, 233, 0.12);
  --app-primary-muted: rgba(14, 165, 233, 0.06);

  --app-bg: #f8fafc;
  --app-surface: #ffffff;
  --app-surface-2: #f1f5f9;
  --app-surface-3: #e2e8f0;

  --app-border: #e2e8f0;
  --app-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --app-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --app-shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.12);

  --app-text: #0f172a;
  --app-text-secondary: #334155;
  --app-text-muted: #64748b;

  --app-radius: 10px;
  --app-radius-sm: 6px;

  /* Cores padrão oficiais do Swagger UI */
  --m-get: #61affe;
  --m-post: #49cc90;
  --m-put: #fca130;
  --m-patch: #818cf8;
  --m-delete: #f93e3e;

  /* Backgrounds sutis por método (usados ao abrir) */
  --m-get-bg: rgba(97, 175, 254, 0.08);
  --m-post-bg: rgba(73, 204, 144, 0.08);
  --m-put-bg: rgba(252, 161, 48, 0.08);
  --m-patch-bg: rgba(129, 140, 248, 0.08);
  --m-delete-bg: rgba(249, 62, 62, 0.08);

  background: var(--app-bg);
  color: var(--app-text);
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   2. Variáveis — DARK (fallback via preferência do SO)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .swagger-ui {
    --app-primary-soft: rgba(14, 165, 233, 0.15);
    --app-primary-muted: rgba(14, 165, 233, 0.07);

    --app-bg: #0f172a;
    --app-surface: #1e293b;
    --app-surface-2: #172033;
    --app-surface-3: #263348;

    --app-border: #334155;
    --app-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30);
    --app-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --app-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.50);

    --app-text: #e2e8f0;
    --app-text-secondary: #cbd5e1;
    --app-text-muted: #94a3b8;

    --m-get-bg: rgba(97, 175, 254, 0.10);
    --m-post-bg: rgba(73, 204, 144, 0.10);
    --m-put-bg: rgba(252, 161, 48, 0.10);
    --m-patch-bg: rgba(129, 140, 248, 0.10);
    --m-delete-bg: rgba(249, 62, 62, 0.10);

    background: var(--app-bg);
    color: var(--app-text);
  }
}

/* --------------------------------------------------------------------------
   2b. DARK explícito (toggle manual — sobrescreve @media)
   -------------------------------------------------------------------------- */
.swagger-ui[data-theme="dark"] {
  --app-primary-soft: rgba(14, 165, 233, 0.15);
  --app-primary-muted: rgba(14, 165, 233, 0.07);

  --app-bg: #0f172a;
  --app-surface: #1e293b;
  --app-surface-2: #172033;
  --app-surface-3: #263348;

  --app-border: #334155;
  --app-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30);
  --app-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --app-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.50);

  --app-text: #e2e8f0;
  --app-text-secondary: #cbd5e1;
  --app-text-muted: #94a3b8;

  --m-get-bg: rgba(97, 175, 254, 0.10);
  --m-post-bg: rgba(73, 204, 144, 0.10);
  --m-put-bg: rgba(252, 161, 48, 0.10);
  --m-patch-bg: rgba(129, 140, 248, 0.10);
  --m-delete-bg: rgba(249, 62, 62, 0.10);

  background: var(--app-bg);
  color: var(--app-text);
}

/* --------------------------------------------------------------------------
   2c. LIGHT explícito (toggle manual — sobrescreve @media dark)
   -------------------------------------------------------------------------- */
.swagger-ui[data-theme="light"] {
  --app-primary-soft: rgba(14, 165, 233, 0.12);
  --app-primary-muted: rgba(14, 165, 233, 0.06);

  --app-bg: #f8fafc;
  --app-surface: #ffffff;
  --app-surface-2: #f1f5f9;
  --app-surface-3: #e2e8f0;

  --app-border: #e2e8f0;
  --app-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --app-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --app-shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.12);

  --app-text: #0f172a;
  --app-text-secondary: #334155;
  --app-text-muted: #64748b;

  --m-get-bg: rgba(97, 175, 254, 0.08);
  --m-post-bg: rgba(73, 204, 144, 0.08);
  --m-put-bg: rgba(252, 161, 48, 0.08);
  --m-patch-bg: rgba(129, 140, 248, 0.08);
  --m-delete-bg: rgba(249, 62, 62, 0.08);

  background: var(--app-bg);
  color: var(--app-text);
}

/* --------------------------------------------------------------------------
   3. Reset de cor de texto
   -------------------------------------------------------------------------- */
.swagger-ui,
.swagger-ui .info .title,
.swagger-ui .info p,
.swagger-ui .info li,
.swagger-ui .info table,
.swagger-ui .opblock-tag,
.swagger-ui .opblock .opblock-summary-path,
.swagger-ui .opblock .opblock-summary-path__deprecated,
.swagger-ui .opblock .opblock-summary-description,
.swagger-ui .opblock-description-wrapper p,
.swagger-ui .opblock-external-docs-wrapper p,
.swagger-ui .parameter__name,
.swagger-ui .parameter__type,
.swagger-ui .parameter__in,
.swagger-ui table thead tr th,
.swagger-ui table thead tr td,
.swagger-ui .response-col_status,
.swagger-ui .response-col_links,
.swagger-ui .col_header,
.swagger-ui .responses-inner h4,
.swagger-ui .responses-inner h5,
.swagger-ui .model-title,
.swagger-ui .model,
.swagger-ui section.models h4,
.swagger-ui section.models h5,
.swagger-ui .tab li,
.swagger-ui label,
.swagger-ui .parameter__extension,
.swagger-ui .renderedMarkdown p,
.swagger-ui .renderedMarkdown li {
  color: var(--app-text);
}

.swagger-ui .opblock-summary-description,
.swagger-ui .parameter__in,
.swagger-ui .parameter__extension,
.swagger-ui .tab li.tabitem:not(.active) {
  color: var(--app-text-muted);
}

/* --------------------------------------------------------------------------
   4. Links
   -------------------------------------------------------------------------- */
.swagger-ui a,
.swagger-ui .info a,
.swagger-ui .info .base-url {
  color: var(--app-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.swagger-ui a:hover {
  color: var(--app-primary-hover);
}

/* --------------------------------------------------------------------------
   5. Topbar
   -------------------------------------------------------------------------- */
.swagger-ui .topbar {
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  box-shadow: var(--app-shadow-sm);
  padding: 8px 0;
}

.swagger-ui .topbar .download-url-wrapper .select-label span {
  color: var(--app-text-secondary);
}

.swagger-ui .topbar .download-url-wrapper input[type='text'] {
  background: var(--app-surface-2);
  border-color: var(--app-border);
  color: var(--app-text);
  border-radius: var(--app-radius-sm);
}

.swagger-ui .topbar .download-url-wrapper .download-url-button {
  background: var(--app-primary);
  border-color: var(--app-primary);
  border-radius: var(--app-radius-sm);
  color: #fff;
  font-weight: 600;
}

.swagger-ui .topbar .download-url-wrapper .download-url-button:hover {
  background: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
}

/* --------------------------------------------------------------------------
   6. Seção de informações
   -------------------------------------------------------------------------- */
.swagger-ui .info {
  margin: 36px 0 28px;
}

.swagger-ui .info .title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--app-text);
}

.swagger-ui .info .title small {
  background: var(--app-primary);
  border-radius: var(--app-radius-sm);
  vertical-align: middle;
}

.swagger-ui .info .title small pre {
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--app-radius-sm);
  padding: 4px;
}

/* --------------------------------------------------------------------------
   7. Scheme container (servidores + botão Authorize)
   -------------------------------------------------------------------------- */
.swagger-ui .scheme-container {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-sm);
  padding: 16px 20px;
}

/* --------------------------------------------------------------------------
   8. Tags / grupos de endpoints
   -------------------------------------------------------------------------- */
.swagger-ui .opblock-tag {
  border-bottom: 1px solid var(--app-border);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 12px 0 10px;
  transition: color 0.15s ease;
  color: var(--app-text);
}

.swagger-ui .opblock-tag:hover {
  color: var(--app-primary);
  background: transparent;
}

.swagger-ui .opblock-tag small {
  color: var(--app-text-muted);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   9. Blocos de endpoint
   -------------------------------------------------------------------------- */
.swagger-ui .opblock {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-left: 4px solid transparent;
  border-radius: var(--app-radius);
  margin: 0 0 10px;
  box-shadow: var(--app-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
}

.swagger-ui .opblock:hover {
  transform: translateY(-2px);
  box-shadow: var(--app-shadow-md);
}

.swagger-ui .opblock.is-open {
  box-shadow: var(--app-shadow-md);
}

.swagger-ui .opblock .opblock-summary {
  border-color: var(--app-border);
}

.swagger-ui .opblock .opblock-summary-method {
  border-radius: var(--app-radius-sm);
  color: #fff;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  min-width: 68px;
  box-shadow: none;
}

.swagger-ui .opblock .opblock-section-header {
  background: var(--app-surface-2);
  border-bottom: 1px solid var(--app-border);
  box-shadow: none;
}

.swagger-ui .opblock .opblock-section-header h4,
.swagger-ui .opblock .opblock-section-header label,
.swagger-ui .opblock .opblock-section-header label span {
  color: var(--app-text);
}

/* Fundo sutil nos blocos abertos por método */
.swagger-ui .opblock.opblock-get.is-open {
  background: var(--m-get-bg);
}

.swagger-ui .opblock.opblock-post.is-open {
  background: var(--m-post-bg);
}

.swagger-ui .opblock.opblock-put.is-open {
  background: var(--m-put-bg);
}

.swagger-ui .opblock.opblock-patch.is-open {
  background: var(--m-patch-bg);
}

.swagger-ui .opblock.opblock-delete.is-open {
  background: var(--m-delete-bg);
}

/* Cor lateral + badge + background + borda por método
   (sobrescreve os estilos nativos do Swagger que usam cores hardcoded) */
.swagger-ui .opblock.opblock-get {
  background: var(--app-surface);
  border-color: var(--m-get);
  border-left: 4px solid var(--m-get);
}

.swagger-ui .opblock.opblock-get .opblock-summary {
  background: var(--m-get-bg);
}

.swagger-ui .opblock.opblock-get .opblock-summary-method {
  background: var(--m-get);
}

.swagger-ui .opblock.opblock-post {
  background: var(--app-surface);
  border-color: var(--m-post);
  border-left: 4px solid var(--m-post);
}

.swagger-ui .opblock.opblock-post .opblock-summary {
  background: var(--m-post-bg);
}

.swagger-ui .opblock.opblock-post .opblock-summary-method {
  background: var(--m-post);
}

.swagger-ui .opblock.opblock-put {
  background: var(--app-surface);
  border-color: var(--m-put);
  border-left: 4px solid var(--m-put);
}

.swagger-ui .opblock.opblock-put .opblock-summary {
  background: var(--m-put-bg);
}

.swagger-ui .opblock.opblock-put .opblock-summary-method {
  background: var(--m-put);
}

.swagger-ui .opblock.opblock-patch {
  background: var(--app-surface);
  border-color: var(--m-patch);
  border-left: 4px solid var(--m-patch);
}

.swagger-ui .opblock.opblock-patch .opblock-summary {
  background: var(--m-patch-bg);
}

.swagger-ui .opblock.opblock-patch .opblock-summary-method {
  background: var(--m-patch);
}

.swagger-ui .opblock.opblock-delete {
  background: var(--app-surface);
  border-color: var(--m-delete);
  border-left: 4px solid var(--m-delete);
}

.swagger-ui .opblock.opblock-delete .opblock-summary {
  background: var(--m-delete-bg);
}

.swagger-ui .opblock.opblock-delete .opblock-summary-method {
  background: var(--m-delete);
}

/* --------------------------------------------------------------------------
   10. Botões
   -------------------------------------------------------------------------- */
.swagger-ui .btn {
  border-radius: var(--app-radius-sm);
  font-weight: 600;
  font-size: 0.8rem;
  box-shadow: none;
  transition: background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.swagger-ui .btn.authorize,
.swagger-ui .btn.execute {
  background: var(--app-primary);
  color: #fff;
  border-color: var(--app-primary);
}

.swagger-ui .btn.authorize svg {
  fill: #fff;
}

.swagger-ui .btn.authorize:hover,
.swagger-ui .btn.execute:hover {
  background: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
  box-shadow: 0 0 0 3px var(--app-primary-soft);
}

.swagger-ui .btn.try-out__btn {
  background: transparent;
  color: var(--app-primary);
  border-color: var(--app-primary);
}

.swagger-ui .btn.try-out__btn:hover {
  background: var(--app-primary-soft);
}

.swagger-ui .btn.cancel {
  background: transparent;
  color: var(--m-delete);
  border-color: var(--m-delete);
}

.swagger-ui .btn.cancel:hover {
  background: rgba(249, 62, 62, 0.08);
}

/* --------------------------------------------------------------------------
   11. Modal de autorização
   -------------------------------------------------------------------------- */
.swagger-ui .dialog-ux .modal-ux {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-lg);
}

.swagger-ui .dialog-ux .modal-ux-header {
  border-bottom: 1px solid var(--app-border);
}

.swagger-ui .dialog-ux .modal-ux-header h3,
.swagger-ui .dialog-ux .modal-ux-content h4,
.swagger-ui .dialog-ux .modal-ux-content p,
.swagger-ui .dialog-ux .modal-ux-content label {
  color: var(--app-text);
}

/* --------------------------------------------------------------------------
   12. Inputs, textareas e selects
   -------------------------------------------------------------------------- */
.swagger-ui input[type='text'],
.swagger-ui input[type='password'],
.swagger-ui input[type='email'],
.swagger-ui input[type='number'],
.swagger-ui input[type='search'],
.swagger-ui textarea,
.swagger-ui select {
  background: var(--app-surface);
  color: var(--app-text);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.swagger-ui input[type='text']:focus,
.swagger-ui input[type='password']:focus,
.swagger-ui input[type='email']:focus,
.swagger-ui input[type='number']:focus,
.swagger-ui input[type='search']:focus,
.swagger-ui textarea:focus,
.swagger-ui select:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 3px var(--app-primary-soft);
  outline: none;
}

.swagger-ui input::placeholder,
.swagger-ui textarea::placeholder {
  color: var(--app-text-muted);
}

.swagger-ui .parameter__name.required:after {
  color: var(--m-delete);
}

.swagger-ui input.invalid,
.swagger-ui textarea.invalid,
.swagger-ui select.invalid {
  border-color: var(--m-delete);
  background: rgba(249, 62, 62, 0.06);
}

/* --------------------------------------------------------------------------
   13. Tabelas, parâmetros e respostas
   -------------------------------------------------------------------------- */
.swagger-ui table tbody tr td,
.swagger-ui table thead tr th,
.swagger-ui table thead tr td {
  border-color: var(--app-border);
}

.swagger-ui .parameters-col_description {
  color: var(--app-text-secondary);
}

.swagger-ui .responses-inner {
  background: transparent;
}

.swagger-ui .response-col_description .response-col_description__inner div.renderedMarkdown {
  color: var(--app-text-secondary);
}

/* --------------------------------------------------------------------------
   14. Models / schemas
   -------------------------------------------------------------------------- */
.swagger-ui section.models {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-sm);
}

.swagger-ui section.models.is-open h4 {
  border-bottom: 1px solid var(--app-border);
}

.swagger-ui section.models .model-container {
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
}

.swagger-ui .model-box {
  background: transparent;
}

.swagger-ui .model .property.primitive,
.swagger-ui .model .prop-type {
  color: var(--app-primary);
}

.swagger-ui .model-toggle:after {
  filter: none;
}

.swagger-ui[data-theme="dark"] .model-toggle:after {
  filter: invert(0.85);
}

@media (prefers-color-scheme: dark) {
  .swagger-ui:not([data-theme]) .model-toggle:after {
    filter: invert(0.85);
  }
}

/* --------------------------------------------------------------------------
   15. Blocos de código / JSON
   -------------------------------------------------------------------------- */
.swagger-ui .highlight-code,
.swagger-ui .microlight {
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
}

.swagger-ui .highlight-code .microlight,
.swagger-ui .microlight code,
.swagger-ui .microlight {
  color: var(--app-text);
  font-family: 'JetBrains Mono', 'Source Code Pro', 'Consolas', monospace;
  font-size: 0.85rem;
}

.swagger-ui[data-theme="dark"] .highlight-code,
.swagger-ui[data-theme="dark"] .microlight {
  background: #0b1220;
}

.swagger-ui[data-theme="dark"] .highlight-code .microlight,
.swagger-ui[data-theme="dark"] .microlight code,
.swagger-ui[data-theme="dark"] .microlight {
  color: #e2e8f0;
}

@media (prefers-color-scheme: dark) {

  .swagger-ui:not([data-theme]) .highlight-code,
  .swagger-ui:not([data-theme]) .microlight {
    background: #0b1220;
  }

  .swagger-ui:not([data-theme]) .highlight-code .microlight,
  .swagger-ui:not([data-theme]) .microlight code,
  .swagger-ui:not([data-theme]) .microlight {
    color: #e2e8f0;
  }
}

.swagger-ui .renderedMarkdown code,
.swagger-ui .markdown code {
  background: var(--app-primary-soft);
  color: var(--app-primary);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: 'JetBrains Mono', 'Source Code Pro', monospace;
  font-size: 0.82em;
}

/* --------------------------------------------------------------------------
   16. Mensagens de erro / loading
   -------------------------------------------------------------------------- */
.swagger-ui .errors-wrapper {
  background: rgba(249, 62, 62, 0.06);
  border: 1px solid var(--m-delete);
  border-radius: var(--app-radius);
}

.swagger-ui .errors-wrapper .errors h4,
.swagger-ui .errors-wrapper hgroup h4 {
  color: var(--app-text);
}

.swagger-ui .loading-container .loading:after {
  color: var(--app-text-muted);
}

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

.swagger-ui ::-webkit-scrollbar-track {
  background: var(--app-surface-2);
  border-radius: 999px;
}

.swagger-ui ::-webkit-scrollbar-thumb {
  background: var(--app-surface-3);
  border-radius: 999px;
  border: 2px solid var(--app-surface-2);
}

.swagger-ui ::-webkit-scrollbar-thumb:hover {
  background: var(--app-primary);
}

.swagger-ui * {
  scrollbar-width: thin;
  scrollbar-color: var(--app-surface-3) var(--app-surface-2);
}

.swagger-ui .highlight-code>.microlight code {
  color: #fff !important;
}