/* ==========================================================================
   Abelo Documentation - Custom Theme (matching service_default_ui)
   Light & Dark Mode Support
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   1. Light Theme Tokens (default)
   ========================================================================== */
:root,
[data-md-color-scheme="default"] {
  /* Core Brand Tokens */
  --abelo-primary: #462EFE;
  --abelo-primary-dark: #2F17EC;
  --abelo-primary-light: #705AFE;
  --abelo-selago: #F3F6FD;
  --abelo-dark: #0F100D;
  --abelo-gray: #6E768D;
  --abelo-lightgray: #B7B6C3;
  --abelo-separator: #EFEFEF;
  --abelo-surface: #FAFAFA;
  --abelo-bg: #FFFFFF;
  --abelo-rose: #FF0069;
  --abelo-lime: #CFFB0C;
  --abelo-warning: #FFD572;

  /* MkDocs Material Color Mapping */
  --md-primary-fg-color: #462EFE;
  --md-primary-fg-color--light: #705AFE;
  --md-primary-fg-color--dark: #2F17EC;
  --md-primary-bg-color: #FFFFFF;
  --md-primary-bg-color--light: #FAFAFA;

  --md-accent-fg-color: #462EFE;
  --md-accent-fg-color--transparent: rgba(70, 46, 254, 0.1);
  --md-accent-bg-color: #FFFFFF;

  --md-text-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --md-code-font: "JetBrains Mono", "SFMono-Regular", Consolas, Menlo, monospace;
  --md-code-font-size: 0.75rem;
  --md-typeset-code-font-size: 0.75rem;

  --md-default-fg-color: #0F100D;
  --md-default-fg-color--light: #6E768D;
  --md-default-fg-color--lighter: #B7B6C3;
  --md-default-bg-color: #FFFFFF;
  --md-default-bg-color--light: #FAFAFA;

  --md-typeset-a-color: #462EFE;
}

/* ==========================================================================
   2. Dark Theme Tokens (slate)
   ========================================================================== */
[data-md-color-scheme="slate"] {
  /* Core Brand Tokens */
  --abelo-primary: #705AFE;
  --abelo-primary-dark: #462EFE;
  --abelo-primary-light: #8E7CFF;
  --abelo-selago: #1E1F24;
  --abelo-dark: #F3F6FD;
  --abelo-gray: #9E9EA7;
  --abelo-lightgray: #55565F;
  --abelo-separator: #262724;
  --abelo-surface: #171816;
  --abelo-bg: #0F100D;
  --abelo-rose: #FF3385;
  --abelo-lime: #D6FF38;
  --abelo-warning: #FFE082;

  /* MkDocs Material Dark Color Mapping */
  --md-primary-fg-color: #705AFE;
  --md-primary-fg-color--light: #8E7CFF;
  --md-primary-fg-color--dark: #462EFE;
  --md-primary-bg-color: #0F100D;
  --md-primary-bg-color--light: #171816;

  --md-accent-fg-color: #705AFE;
  --md-accent-fg-color--transparent: rgba(112, 90, 254, 0.15);
  --md-accent-bg-color: #171816;

  --md-default-fg-color: #F3F6FD;
  --md-default-fg-color--light: #9E9EA7;
  --md-default-fg-color--lighter: #55565F;
  --md-default-bg-color: #0F100D;
  --md-default-bg-color--light: #171816;

  --md-typeset-a-color: #8E7CFF;
}

/* ==========================================================================
   3. Header & Navigation Tabs
   ========================================================================== */
.md-header {
  background-color: var(--abelo-bg) !important;
  color: var(--abelo-dark) !important;
  border-bottom: 1px solid var(--abelo-separator);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.md-header__title,
.md-header__topic,
.md-header__button {
  color: var(--abelo-dark) !important;
}

/* Logo styling & dark mode handling */
.md-header__button.md-logo img, 
.md-header__button.md-logo svg {
  height: 28px;
  width: auto;
}

[data-md-color-scheme="slate"] .md-header__button.md-logo img,
[data-md-color-scheme="slate"] .md-header__button.md-logo svg {
  filter: brightness(0) invert(1);
}

/* Tabs Bar */
.md-tabs {
  background-color: var(--abelo-surface) !important;
  border-bottom: 1px solid var(--abelo-separator);
}

.md-tabs__link {
  color: var(--abelo-gray) !important;
  font-weight: 500;
  font-size: 0.85rem;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.md-tabs__item--active .md-tabs__link,
.md-tabs__link:hover {
  color: var(--abelo-primary) !important;
  opacity: 1 !important;
  font-weight: 600;
}

/* ==========================================================================
   4. Buttons & Interactive Elements
   ========================================================================== */
.md-typeset .md-button--primary {
  background-color: var(--abelo-primary);
  border-color: var(--abelo-primary);
  color: #FFFFFF !important;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(70, 46, 254, 0.2);
  transition: all 0.2s ease;
}

.md-typeset .md-button--primary:hover {
  background-color: var(--abelo-primary-dark);
  border-color: var(--abelo-primary-dark);
  box-shadow: 0 6px 16px rgba(47, 23, 236, 0.3);
  transform: translateY(-1px);
}

/* Card Grids */
.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--abelo-separator);
  border-radius: 12px;
  background: var(--abelo-surface);
  box-shadow: 0 0 0 1px var(--abelo-separator), 0 5px 10px 0 rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--abelo-primary);
  box-shadow: 0 0 0 1px var(--abelo-primary), 0 10px 20px 0 rgba(70, 46, 254, 0.08);
  transform: translateY(-2px);
}

/* ==========================================================================
   5. Code Typography: Inline Code vs. Block Code
   ========================================================================== */

/* Inline Code: Scales proportionally (0.86em) to match parent text height */
html body .md-typeset :not(pre) > code {
  font-size: 0.86em !important;
  font-family: var(--md-code-font) !important;
  background-color: var(--abelo-surface);
  border: 1px solid var(--abelo-separator);
  border-radius: 4px;
  padding: 0.12em 0.35em;
  font-weight: 500;
  color: var(--abelo-dark);
  vertical-align: baseline;
}

/* Multi-line Code Blocks (pre, highlight, tabbed blocks) */
html body .md-typeset pre,
html body .md-typeset pre > code,
html body .md-typeset .highlight,
html body .md-typeset .highlight pre,
html body .md-typeset .highlight code,
html body .md-typeset .highlight code span,
html body .md-typeset div.highlight pre,
html body .md-typeset div.highlight code,
html body .md-typeset .tabbed-content pre,
html body .md-typeset .tabbed-content code {
  font-size: 12px !important;
  font-family: var(--md-code-font) !important;
  line-height: 1.55 !important;
  letter-spacing: -0.01em !important;
}

html body .md-typeset pre {
  margin: 1em 0;
  padding: 0.85em 1em;
  border-radius: 8px;
  border: 1px solid var(--abelo-separator);
  background-color: var(--abelo-surface) !important;
}

/* ==========================================================================
   6. Tables (Ultra-Compact, Sleek, Proportional)
   ========================================================================== */
html body .md-typeset table:not([class]),
html body .md-typeset table {
  font-size: 0.75rem !important; /* ~12px */
  line-height: 1.45 !important;
  border: 1px solid var(--abelo-separator);
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin: 0.9em 0;
  background-color: var(--abelo-surface);
}

html body .md-typeset table:not([class]) th,
html body .md-typeset table th {
  font-size: 0.72rem !important; /* ~11.5px */
  font-weight: 700 !important;
  color: var(--abelo-dark) !important;
  background-color: var(--abelo-bg) !important;
  border-bottom: 1px solid var(--abelo-separator) !important;
  padding: 0.45em 0.75em !important;
  letter-spacing: 0.01em;
}

html body .md-typeset table:not([class]) td,
html body .md-typeset table td {
  font-size: 0.75rem !important; /* ~12px */
  color: var(--md-default-fg-color) !important;
  border-bottom: 1px solid var(--abelo-separator) !important;
  padding: 0.45em 0.75em !important;
}

html body .md-typeset table:not([class]) tr:last-child td,
html body .md-typeset table tr:last-child td {
  border-bottom: none !important;
}

/* ==========================================================================
   7. Mermaid Diagrams Styling (Centered & Clean)
   ========================================================================== */
html body .md-typeset .mermaid,
.mermaid {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  margin: 1.5em auto !important;
  width: 100% !important;
  font-size: 11.5px !important;
}

html body .md-typeset .mermaid svg,
.mermaid svg {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
  height: auto !important;
}

.mermaid text,
.mermaid .nodeLabel,
.mermaid .label {
  font-size: 11.5px !important;
  font-family: "Manrope", sans-serif !important;
  fill: var(--abelo-dark) !important;
}

.mermaid .node rect,
.mermaid .node circle,
.mermaid .node polygon {
  stroke: var(--abelo-primary) !important;
  stroke-width: 1.5px !important;
  fill: var(--abelo-surface) !important;
}

/* ==========================================================================
   8. Admonitions (Callouts)
   ========================================================================== */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px;
  border-left-width: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  background-color: var(--abelo-surface) !important;
  margin: 1.2em 0;
  padding: 0 0.9rem 0.6rem 0.9rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 700 !important;
  color: var(--abelo-dark) !important;
  font-family: var(--md-text-font) !important;
  font-size: 0.85rem !important;
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-left-color: var(--abelo-primary) !important;
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-left-color: #10B981 !important;
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-left-color: var(--abelo-warning) !important;
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-left-color: var(--abelo-rose) !important;
}

/* ==========================================================================
   9. Footer Customization
   ========================================================================== */
.md-footer {
  background-color: var(--abelo-surface) !important;
  color: var(--abelo-gray) !important;
  border-top: 1px solid var(--abelo-separator);
}

.md-footer-meta {
  background-color: var(--abelo-bg) !important;
  border-top: 1px solid var(--abelo-separator);
}

.md-footer-meta__inner {
  color: var(--abelo-gray) !important;
  font-size: 0.8rem;
}

.md-footer__title {
  color: var(--abelo-dark) !important;
  font-weight: 600;
}

.md-footer__link:hover .md-footer__title {
  color: var(--abelo-primary) !important;
}

/* ==========================================================================
   10. Screenshot & Image Placeholder Cards
   ========================================================================== */
.screenshot-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--abelo-lightgray);
  background-color: var(--abelo-surface);
  border-radius: 8px;
  padding: 24px 20px;
  margin: 20px 0;
  text-align: center;
  color: var(--abelo-gray);
  font-size: 0.85rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.screenshot-placeholder:hover {
  border-color: var(--abelo-primary);
  background-color: var(--abelo-selago);
}

.screenshot-placeholder .badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--abelo-separator);
  color: var(--abelo-primary);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.screenshot-placeholder strong {
  color: var(--abelo-dark);
  font-size: 0.92rem;
  margin-bottom: 4px;
}

.screenshot-placeholder span {
  max-width: 500px;
  line-height: 1.4;
}

/* ==========================================================================
   11. Swagger UI Component Styling
   ========================================================================== */
.swagger-wrapper {
  margin: 1.2em 0;
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   11.1 Light Mode Swagger UI
   -------------------------------------------------------------------------- */
[data-md-color-scheme="default"] .swagger-ui .scheme-container {
  background: var(--abelo-surface) !important;
  box-shadow: none !important;
  border: 1px solid var(--abelo-separator) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
}

[data-md-color-scheme="default"] .swagger-ui .schemes > label {
  color: var(--abelo-dark) !important;
  font-weight: 700 !important;
}

[data-md-color-scheme="default"] .swagger-ui .info .title {
  color: var(--abelo-dark) !important;
}

/* --------------------------------------------------------------------------
   11.2 Dark Mode Swagger UI (High Contrast & Slate Theming)
   -------------------------------------------------------------------------- */

/* Scheme Container (Servers & Authorize Bar) */
[data-md-color-scheme="slate"] .swagger-ui .scheme-container {
  background: #171816 !important;
  box-shadow: none !important;
  border: 1px solid #262724 !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
}

[data-md-color-scheme="slate"] .swagger-ui .schemes > label,
[data-md-color-scheme="slate"] .swagger-ui .schemes-title {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

[data-md-color-scheme="slate"] .swagger-ui .btn.authorize {
  color: #10B981 !important;
  border-color: #10B981 !important;
  background-color: rgba(16, 185, 129, 0.12) !important;
}

[data-md-color-scheme="slate"] .swagger-ui .btn.authorize svg {
  fill: #10B981 !important;
}

/* Info & Header Title */
[data-md-color-scheme="slate"] .swagger-ui .info .title {
  color: #FFFFFF !important;
}

[data-md-color-scheme="slate"] .swagger-ui .info .title small {
  background: #262724 !important;
  color: #8E7CFF !important;
}

[data-md-color-scheme="slate"] .swagger-ui .info .title small.version-stamp {
  background: #262724 !important;
}

[data-md-color-scheme="slate"] .swagger-ui .info p,
[data-md-color-scheme="slate"] .swagger-ui .info li,
[data-md-color-scheme="slate"] .swagger-ui .info .description {
  color: #E5E7EB !important;
}

[data-md-color-scheme="slate"] .swagger-ui .info a {
  color: #8E7CFF !important;
}

/* Endpoint Paths */
[data-md-color-scheme="slate"] .swagger-ui .opblock-summary-path,
[data-md-color-scheme="slate"] .swagger-ui .opblock-summary-path span,
[data-md-color-scheme="slate"] .swagger-ui .opblock-summary-path a {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Parameter Names & Types */
[data-md-color-scheme="slate"] .swagger-ui .parameter__name,
[data-md-color-scheme="slate"] .swagger-ui .parameters-col_name {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

[data-md-color-scheme="slate"] .swagger-ui .parameter__name.required,
[data-md-color-scheme="slate"] .swagger-ui .parameter__name.required span {
  color: #FF3385 !important;
}

[data-md-color-scheme="slate"] .swagger-ui .parameter__type,
[data-md-color-scheme="slate"] .swagger-ui .prop-type {
  color: #8E7CFF !important;
  font-weight: 600 !important;
}

[data-md-color-scheme="slate"] .swagger-ui .parameter__in {
  color: #D1D5DB !important;
}

[data-md-color-scheme="slate"] .swagger-ui .opblock-summary-description {
  color: #D1D5DB !important;
}

[data-md-color-scheme="slate"] .swagger-ui .opblock-description-wrapper,
[data-md-color-scheme="slate"] .swagger-ui .opblock-description-wrapper p,
[data-md-color-scheme="slate"] .swagger-ui .opblock-external-docs-wrapper,
[data-md-color-scheme="slate"] .swagger-ui .opblock-title_normal,
[data-md-color-scheme="slate"] .swagger-ui .parameters-col_description,
[data-md-color-scheme="slate"] .swagger-ui .parameters-col_description p {
  color: #E5E7EB !important;
}

/* Tabs: Example Value & Schema */
[data-md-color-scheme="slate"] .swagger-ui .tab,
[data-md-color-scheme="slate"] .swagger-ui ul.tab,
[data-md-color-scheme="slate"] .swagger-ui .tabitem,
[data-md-color-scheme="slate"] .swagger-ui .tab li,
[data-md-color-scheme="slate"] .swagger-ui .tab li a,
[data-md-color-scheme="slate"] .swagger-ui .tab li button,
[data-md-color-scheme="slate"] .swagger-ui .tabli,
[data-md-color-scheme="slate"] .swagger-ui .tablinks,
[data-md-color-scheme="slate"] .swagger-ui a.tablinks,
[data-md-color-scheme="slate"] .swagger-ui button.tablinks,
[data-md-color-scheme="slate"] .swagger-ui .tabitem a,
[data-md-color-scheme="slate"] .swagger-ui .tabitem button {
  color: #9E9EA7 !important;
  font-weight: 600 !important;
}

[data-md-color-scheme="slate"] .swagger-ui .tab li.active,
[data-md-color-scheme="slate"] .swagger-ui .tab li.active a,
[data-md-color-scheme="slate"] .swagger-ui .tab li.active button,
[data-md-color-scheme="slate"] .swagger-ui .tabitem.active,
[data-md-color-scheme="slate"] .swagger-ui .tabitem.active a,
[data-md-color-scheme="slate"] .swagger-ui .tabitem.active button,
[data-md-color-scheme="slate"] .swagger-ui .tabli.active,
[data-md-color-scheme="slate"] .swagger-ui .tabli.active a,
[data-md-color-scheme="slate"] .swagger-ui .tabli.active button,
[data-md-color-scheme="slate"] .swagger-ui .tab li a.active,
[data-md-color-scheme="slate"] .swagger-ui a.tablinks.active,
[data-md-color-scheme="slate"] .swagger-ui button.tablinks.active {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

/* Section Header Bars (Parameters, Request body, Responses) */
[data-md-color-scheme="slate"] .swagger-ui .opblock-section-header {
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  border-bottom: 1px solid #262724 !important;
}

[data-md-color-scheme="slate"] .swagger-ui .opblock-section-header h4,
[data-md-color-scheme="slate"] .swagger-ui .opblock-section-header label,
[data-md-color-scheme="slate"] .swagger-ui .opblock-section-header h4 span {
  color: #FFFFFF !important;
}

/* Form Controls & Buttons */
[data-md-color-scheme="slate"] .swagger-ui .btn.try-out__btn {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border-color: #55565F !important;
}

[data-md-color-scheme="slate"] .swagger-ui .btn.try-out__btn:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: #FFFFFF !important;
}

[data-md-color-scheme="slate"] .swagger-ui select,
[data-md-color-scheme="slate"] .swagger-ui .opblock-body select {
  background-color: #1E1F24 !important;
  color: #FFFFFF !important;
  border: 1px solid #363734 !important;
  border-radius: 4px !important;
}

/* Icons & Tags */
[data-md-color-scheme="slate"] .swagger-ui .authorization__btn svg,
[data-md-color-scheme="slate"] .swagger-ui .opblock-summary-control svg {
  fill: #FFFFFF !important;
}

[data-md-color-scheme="slate"] .swagger-ui .opblock-tag,
[data-md-color-scheme="slate"] .swagger-ui .opblock-tag a,
[data-md-color-scheme="slate"] .swagger-ui .model-title,
[data-md-color-scheme="slate"] .swagger-ui .prop-name {
  color: #FFFFFF !important;
}

/* Table Cells & Response Codes */
[data-md-color-scheme="slate"] .swagger-ui table.parameters tbody tr td,
[data-md-color-scheme="slate"] .swagger-ui table.responses-table tbody tr td {
  color: #F3F6FD !important;
}

[data-md-color-scheme="slate"] .swagger-ui .response-col_status {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

[data-md-color-scheme="slate"] .swagger-ui .response-col_description__inner div.markdown p {
  color: #E5E7EB !important;
}