/* Atlas Dark Theme — matches psa-integration-atlas.html colour palette */

/* Slate scheme overrides */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0a0a1a;
  --md-default-fg-color: #e2e8f0;
  --md-default-fg-color--light: #94a3b8;
  --md-default-fg-color--lighter: #64748b;
  --md-primary-fg-color: #7c3aed;
  --md-primary-bg-color: #111128;
  --md-accent-fg-color: #a78bfa;
  --md-code-bg-color: #111128;
  --md-code-fg-color: #c4b5fd;
  --md-typeset-a-color: #a78bfa;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* LAYOUT — Widen content area to use full screen                            */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Increase grid max-width from default 61rem to 90rem */
.md-grid {
  max-width: 90rem;
}

/* Content area fills available space */
.md-main__inner {
  max-width: none;
}

/* Ensure content flows properly */
.md-content {
  max-width: none;
  overflow-x: hidden;
}

.md-content__inner {
  max-width: none;
  padding-top: 1rem;
}

/* Right TOC sidebar — slimmer to give more content room */
.md-sidebar--secondary {
  width: 13rem;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* HEADER & NAV                                                              */
/* ═══════════════════════════════════════════════════════════════════════════ */

[data-md-color-scheme="slate"] .md-header {
  background-color: #111128;
  border-bottom: 1px solid #2d2d5a;
}

[data-md-color-scheme="slate"] .md-tabs {
  background-color: #111128;
  border-bottom: 1px solid #2d2d5a;
}

[data-md-color-scheme="slate"] .md-nav__link--active {
  color: #a78bfa;
  border-left: 3px solid #7c3aed;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* SIDEBAR                                                                   */
/* ═══════════════════════════════════════════════════════════════════════════ */

[data-md-color-scheme="slate"] .md-sidebar {
  background-color: #111128;
  border-right: 1px solid #2d2d5a;
}

/* Left sidebar — wider to fit Dutch nav labels */
.md-sidebar--primary {
  width: 14rem;
}

/* Sidebar nav font — allow wrapping for long labels */
[data-md-color-scheme="slate"] .md-nav__item .md-nav__link {
  font-size: 0.74rem;
  white-space: normal;
  word-wrap: break-word;
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__title {
  color: #a78bfa;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* FOOTER — fix overlap with sidebar                                         */
/* ═══════════════════════════════════════════════════════════════════════════ */

.md-footer {
  position: relative;
  z-index: 1;
}

.md-footer-meta {
  background-color: #0a0a1a;
  border-top: 1px solid #2d2d5a;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ADMONITIONS — match atlas callout colours                                 */
/* ═══════════════════════════════════════════════════════════════════════════ */

[data-md-color-scheme="slate"] .md-typeset .admonition.info,
[data-md-color-scheme="slate"] .md-typeset details.info {
  border-color: #3b82f6;
  background-color: rgba(59, 130, 246, 0.06);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.success,
[data-md-color-scheme="slate"] .md-typeset details.success {
  border-color: #10b981;
  background-color: rgba(16, 185, 129, 0.06);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.warning,
[data-md-color-scheme="slate"] .md-typeset details.warning {
  border-color: #f59e0b;
  background-color: rgba(245, 158, 11, 0.06);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.danger,
[data-md-color-scheme="slate"] .md-typeset details.danger {
  border-color: #ef4444;
  background-color: rgba(239, 68, 68, 0.06);
}

/* Admonitions must not overflow content area */
.md-typeset .admonition,
.md-typeset details {
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* TABLES — responsive, scrollable, full width                               */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Wrapper: scroll horizontally if table is wider than content */
.md-typeset__scrollwrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.md-typeset table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

/* Scrollable table wrapper for overflow */
.md-typeset__table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: #1a1a35;
  color: #a78bfa;
  border: 1px solid #2d2d5a;
  padding: 0.5rem 0.6rem;
  font-size: 0.75rem;
  white-space: nowrap;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
  border: 1px solid #2d2d5a;
  color: #94a3b8;
  padding: 0.5rem 0.6rem;
  font-size: 0.78rem;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:nth-child(even) {
  background-color: rgba(26, 26, 53, 0.5);
}

/* Prevent table cells from growing too wide */
.md-typeset table td,
.md-typeset table th {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Code inside table cells — smaller */
.md-typeset table code {
  font-size: 0.72rem;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* CODE BLOCKS                                                               */
/* ═══════════════════════════════════════════════════════════════════════════ */

[data-md-color-scheme="slate"] .md-typeset code {
  background-color: #1a1a35;
  color: #c4b5fd;
  border-radius: 3px;
}

[data-md-color-scheme="slate"] .md-typeset pre > code {
  background-color: #0d0d1a;
  border: 1px solid #2d2d5a;
}

/* Code blocks must not overflow */
.md-typeset pre {
  overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* SEARCH                                                                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

[data-md-color-scheme="slate"] .md-search__form {
  background-color: #1a1a35;
  border: 1px solid #2d2d5a;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* DETAILS / ACCORDION (ADR sections) — contain overflow                     */
/* ═══════════════════════════════════════════════════════════════════════════ */

.md-typeset details {
  overflow: hidden;
  max-width: 100%;
}

.md-typeset details summary {
  cursor: pointer;
}

.md-typeset details[open] > * {
  max-width: 100%;
  overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BADGE / PILL — atlas content labels                                       */
/* ═══════════════════════════════════════════════════════════════════════════ */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
}

.badge.ok { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.badge.warn { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.badge.fail { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }
.badge.info { background: rgba(124, 58, 237, 0.15); color: #a78bfa; border: 1px solid rgba(124, 58, 237, 0.3); }

/* ═══════════════════════════════════════════════════════════════════════════ */
/* KB-BADGES — inline CSS badges (no external shields.io dependency)         */
/* ═══════════════════════════════════════════════════════════════════════════ */

.kb-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.kb-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}

.kb-badge.licence { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.kb-badge.version { background: rgba(59, 130, 246, 0.15); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.3); }
.kb-badge.status { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.kb-badge.audience { background: rgba(124, 58, 237, 0.15); color: #a78bfa; border: 1px solid rgba(124, 58, 237, 0.3); }
.kb-badge.count { background: rgba(6, 182, 212, 0.15); color: #06b6d4; border: 1px solid rgba(6, 182, 212, 0.3); }

.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.66rem;
  font-weight: 600;
  margin: 1px;
}

.pill.p { background: rgba(124, 58, 237, 0.15); color: #a78bfa; }
.pill.g { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.pill.b { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.pill.o { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.pill.c { background: rgba(6, 182, 212, 0.15); color: #06b6d4; }

/* ═══════════════════════════════════════════════════════════════════════════ */
/* SVG DIAGRAMS                                                              */
/* ═══════════════════════════════════════════════════════════════════════════ */

[data-md-color-scheme="slate"] img[src$=".svg"] {
  background: #111128;
  border: 1px solid #2d2d5a;
  border-radius: 12px;
  padding: 1rem;
  width: 100%;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

[data-md-color-scheme="default"] img[src$=".svg"] {
  width: 100%;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

/* All images responsive */
.md-typeset img {
  max-width: 100%;
  height: auto;
}

/* Force SVG images to fill content width */
.md-typeset img[src$=".svg"] {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* STATS ROW — single line, matching original atlas                          */
/* ═══════════════════════════════════════════════════════════════════════════ */

.stats-row {
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 1.5rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.stat {
  text-align: center;
  min-width: 60px;
  flex-shrink: 0;
}

.stat .num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.stat .lbl {
  font-size: 0.6rem;
  color: var(--md-default-fg-color--lighter);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE — Tablet (max 1220px)                                          */
/* ═══════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 1220px) {
  .md-grid {
    max-width: 100%;
  }

  /* Hide right TOC sidebar on smaller screens to give more content room */
  .md-sidebar--secondary {
    display: none;
  }
}

@media screen and (max-width: 960px) {
  .stats-row {
    gap: 0.75rem;
  }

  .stat {
    min-width: 50px;
  }

  .stat .num {
    font-size: 1.2rem;
  }

  [data-md-color-scheme="slate"] img[src$=".svg"],
  [data-md-color-scheme="default"] img[src$=".svg"] {
    padding: 0.5rem;
  }

  .md-typeset table {
    font-size: 0.72rem;
  }

  .md-typeset table th,
  .md-typeset table td {
    padding: 0.4rem;
    font-size: 0.7rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* SVG ANIMATIONS — flow, pulse, glow for inline diagram elements            */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Flowing dashed arrows — data moving along a path */
@keyframes svg-flow {
  to { stroke-dashoffset: -20; }
}

.svg-diagram svg .flow {
  stroke-dasharray: 10 5;
  animation: svg-flow 1.2s linear infinite;
}

.svg-diagram svg .flow-slow {
  stroke-dasharray: 12 6;
  animation: svg-flow 2.4s linear infinite;
}

/* Gentle pulse — key result boxes, gates */
@keyframes svg-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.svg-diagram svg .pulse {
  animation: svg-pulse 2.5s ease-in-out infinite;
}

/* Glow — highlight important elements */
@keyframes svg-glow {
  0%, 100% { filter: drop-shadow(0 0 0px transparent); }
  50% { filter: drop-shadow(0 0 6px currentColor); }
}

.svg-diagram svg .glow {
  animation: svg-glow 3s ease-in-out infinite;
}

/* Sequential fade-in — pipeline steps appear one by one */
@keyframes svg-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.svg-diagram svg .step-0 { animation: svg-fade-in 0.5s ease-out 0.1s both; }
.svg-diagram svg .step-1 { animation: svg-fade-in 0.5s ease-out 0.3s both; }
.svg-diagram svg .step-2 { animation: svg-fade-in 0.5s ease-out 0.5s both; }
.svg-diagram svg .step-3 { animation: svg-fade-in 0.5s ease-out 0.7s both; }
.svg-diagram svg .step-4 { animation: svg-fade-in 0.5s ease-out 0.9s both; }
.svg-diagram svg .step-5 { animation: svg-fade-in 0.5s ease-out 1.1s both; }
.svg-diagram svg .step-6 { animation: svg-fade-in 0.5s ease-out 1.3s both; }
.svg-diagram svg .step-7 { animation: svg-fade-in 0.5s ease-out 1.5s both; }
.svg-diagram svg .step-8 { animation: svg-fade-in 0.5s ease-out 1.7s both; }

/* Data particle — small dot travelling along a path */
@keyframes svg-particle {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Hover lift on interactive boxes */
.svg-diagram svg rect[rx]:hover {
  filter: brightness(1.15);
  transition: filter 0.2s ease;
}

/* Reduced motion — respect user preferences */
@media (prefers-reduced-motion: reduce) {
  .svg-diagram svg .flow,
  .svg-diagram svg .flow-slow,
  .svg-diagram svg .pulse,
  .svg-diagram svg .glow,
  .svg-diagram svg [class^="step-"] {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE — Mobile (max 600px)                                           */
/* ═══════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 600px) {
  .stats-row {
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .stat {
    min-width: 45px;
  }

  .stat .num {
    font-size: 1rem;
  }

  .stat .lbl {
    font-size: 0.55rem;
  }

  [data-md-color-scheme="slate"] img[src$=".svg"],
  [data-md-color-scheme="default"] img[src$=".svg"] {
    padding: 0.25rem;
    border-radius: 8px;
  }

  .badge {
    font-size: 0.6rem;
    padding: 1px 6px;
  }

  .pill {
    font-size: 0.58rem;
    padding: 1px 6px;
  }

  .md-typeset h1 {
    font-size: 1.4rem;
  }

  .md-typeset h2 {
    font-size: 1.15rem;
  }

  .md-typeset table {
    font-size: 0.65rem;
  }

  .md-typeset table th,
  .md-typeset table td {
    padding: 0.3rem;
    font-size: 0.62rem;
  }
}