/* powerplatform.wiki — Extra Styles */
/* Last updated: March 2026 */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════════════════
   BRAND TOKENS
═══════════════════════════════════════════════════════════ */
:root {
  --md-primary-fg-color:       #3d52a0;
  --md-primary-fg-color--light: #5a6fc4;
  --md-primary-fg-color--dark:  #2a3870;
  --md-accent-fg-color:        #3d52a0;

  /* Content page tokens */
  --pp-indigo:       #3d52a0;
  --pp-indigo-light: #5a6fc4;
  --pp-indigo-dark:  #2a3870;
  --pp-indigo-faint: #f0f2fa;
  --pp-ink:          #0f1624;
  --pp-ink-mid:      #3a4257;
  --pp-ink-soft:     #6b7491;
  --pp-ink-muted:    #9ba4be;
  --pp-rule:         #e2e5ef;
  --pp-surface:      #f8f9fc;
  --pp-green:        #2a7a5a;
  --pp-green-faint:  #ebf5f0;
  --pp-amber:        #c97b2a;
  --pp-amber-faint:  #fdf4e8;

  /* TL;DR admonition icon */
  --md-admonition-icon--tldr: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 9H7V7h10m0 6H7v-2h10m-3 6H7v-2h7M12 3a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m7 0h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z"/></svg>');
}

/* ═══════════════════════════════════════════════════════════
   CONTENT PAGE TYPOGRAPHY
   DM Serif Display for h1/h2, DM Sans for body
═══════════════════════════════════════════════════════════ */

/* Page title (h1) — DM Serif Display */
.md-typeset h1 {
  font-family: 'DM Serif Display', 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  color: var(--pp-ink) !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5rem !important;
}

/* Section headings (h2) */
.md-typeset h2 {
  font-family: 'DM Serif Display', 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
  color: var(--pp-ink) !important;
  border-bottom: 1px solid var(--pp-rule) !important;
  padding-bottom: 0.3rem !important;
  margin-top: 1.5rem !important;
}

/* Sub-headings (h3) */
.md-typeset h3 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  color: var(--pp-ink-mid) !important;
  letter-spacing: -0.01em !important;
}

.md-typeset h4 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  color: var(--pp-ink-mid) !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* ── Page framework label (monospace label above h1) ── */
.md-typeset .page-framework-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pp-indigo);
  margin-bottom: 8px;
  display: block;
}

/* ── Indigo accent rule under h1 ── */
.md-content__inner > .md-typeset > h1:first-child::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--pp-indigo);
  border-radius: 2px;
  margin-top: 12px;
  margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════
   CONTENT LINKS
═══════════════════════════════════════════════════════════ */
.md-typeset a {
  color: var(--pp-indigo) !important;
  text-decoration-color: rgba(61, 82, 160, 0.3) !important;
  text-decoration-thickness: 1px !important;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.md-typeset a:hover {
  color: var(--pp-indigo-dark) !important;
  text-decoration-color: var(--pp-indigo) !important;
}

/* ═══════════════════════════════════════════════════════════
   TABLES
═══════════════════════════════════════════════════════════ */
.md-typeset table:not([class]) {
  border: 1px solid var(--pp-rule) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  font-size: 0.85rem !important;
  box-shadow: 0 1px 4px rgba(15, 22, 36, 0.04) !important;
}
.md-typeset table:not([class]) th {
  background: var(--pp-indigo) !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 7px 12px !important;
}
.md-typeset table:not([class]) td {
  border-top: 1px solid var(--pp-rule) !important;
  border-left: none !important;
  border-right: none !important;
  padding: 6px 12px !important;
  color: var(--pp-ink-mid) !important;
  vertical-align: top !important;
}
.md-typeset table:not([class]) tr:nth-child(even) td {
  background: var(--pp-surface) !important;
}
.md-typeset table:not([class]) tr:hover td {
  background: var(--pp-indigo-faint) !important;
}

/* ═══════════════════════════════════════════════════════════
   CODE BLOCKS
═══════════════════════════════════════════════════════════ */
.md-typeset code {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.82em !important;
  background: var(--pp-surface) !important;
  color: var(--pp-indigo-dark) !important;
  border: 1px solid var(--pp-rule) !important;
  border-radius: 3px !important;
  padding: 0.1em 0.4em !important;
}
.md-typeset pre > code {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  color: inherit !important;
}

/* ═══════════════════════════════════════════════════════════
   BLOCKQUOTES
═══════════════════════════════════════════════════════════ */
.md-typeset blockquote {
  border-left: 3px solid var(--pp-indigo) !important;
  background: var(--pp-indigo-faint) !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 10px 16px !important;
  margin: 0.75rem 0 !important;
  color: var(--pp-ink-mid) !important;
  font-size: 0.93rem !important;
}

/* ═══════════════════════════════════════════════════════════
   CUSTOM ADMONITION — TL;DR
═══════════════════════════════════════════════════════════ */
.md-typeset .admonition.tldr,
.md-typeset details.tldr {
  border-color: var(--pp-indigo);
  background: var(--pp-indigo-faint);
  border-radius: 8px;
}
.md-typeset .tldr > .admonition-title,
.md-typeset .tldr > summary {
  background-color: rgba(61, 82, 160, 0.1);
  border-color: var(--pp-indigo);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  color: var(--pp-indigo-dark);
}
.md-typeset .tldr > .admonition-title::before,
.md-typeset .tldr > summary::before {
  background-color: var(--pp-indigo);
  -webkit-mask-image: var(--md-admonition-icon--tldr);
  mask-image: var(--md-admonition-icon--tldr);
}

/* ═══════════════════════════════════════════════════════════
   CUSTOM ADMONITION — APPLIES TO (abstract)
═══════════════════════════════════════════════════════════ */
.md-typeset .admonition.abstract,
.md-typeset details.abstract {
  border-color: var(--pp-ink-muted);
  font-size: 0.82rem;
  background: var(--pp-surface);
  border-radius: 8px;
}
.md-typeset .abstract > .admonition-title,
.md-typeset .abstract > summary {
  background-color: rgba(107, 116, 145, 0.08);
  border-color: var(--pp-ink-muted);
}

/* ── Standard admonition border-radius ── */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px !important;
}

/* ═══════════════════════════════════════════════════════════
   FRAMEWORK PILLAR TAGS (inline in content)
═══════════════════════════════════════════════════════════ */
.framework-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-family: 'DM Mono', monospace;
  background: var(--pp-indigo-faint);
  color: var(--pp-indigo-dark);
  margin: 2px 4px 2px 0;
  border: 1px solid rgba(61, 82, 160, 0.15);
}

/* ── Status badges ── */
.badge-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.68rem; font-weight: 500;
  padding: 2px 8px; border-radius: 4px;
  background: var(--pp-green-faint); color: var(--pp-green);
  font-family: 'DM Mono', monospace;
}
.badge-progress {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.68rem; font-weight: 500;
  padding: 2px 8px; border-radius: 4px;
  background: var(--pp-indigo-faint); color: var(--pp-indigo);
  font-family: 'DM Mono', monospace;
}
.badge-planned {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.68rem; font-weight: 500;
  padding: 2px 8px; border-radius: 4px;
  background: var(--pp-amber-faint); color: var(--pp-amber);
  font-family: 'DM Mono', monospace;
}

/* ═══════════════════════════════════════════════════════════
   NAVIGATION — ACTIVE STATE ACCENT
═══════════════════════════════════════════════════════════ */
.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  color: var(--pp-indigo) !important;
  font-weight: 600 !important;
}
.md-nav__item--active > .md-nav__link::before {
  background-color: var(--pp-indigo) !important;
}

/* ── Tab active underline ── */
.md-tabs__link--active {
  border-bottom: 2px solid #fff !important;
}

/* ═══════════════════════════════════════════════════════════
   SEARCH
═══════════════════════════════════════════════════════════ */
.md-search__input::placeholder { color: rgba(255, 255, 255, 0.55) !important; }

/* ═══════════════════════════════════════════════════════════
   FOOTER — suppress MkDocs default footer on all pages
   (home page handles its own footer)
═══════════════════════════════════════════════════════════ */
.md-footer-meta { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   DARK THEME — IBM Plex Sans/Mono + slate scheme
═══════════════════════════════════════════════════════════ */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #3d52a0;
  --md-primary-fg-color--light: #5a6fc4;
  --md-primary-fg-color--dark:  #2a3870;
  --md-accent-fg-color:         #5a6fc4;

  /* Override pp-* content tokens so all !important rules adapt to dark bg */
  --pp-ink:          #e0e6f8;
  --pp-ink-mid:      #c0ccec;
  --pp-ink-soft:     #8090c0;
  --pp-ink-muted:    #5a6a9a;
  --pp-rule:         rgba(255,255,255,0.1);
  --pp-surface:      rgba(255,255,255,0.05);
  --pp-indigo-faint: rgba(61,82,160,0.2);
  --pp-indigo-dark:  #7b93d4;
  --pp-green:        #5ddf9a;
  --pp-green-faint:  rgba(42,122,90,0.2);
  --pp-amber:        #ffb347;
  --pp-amber-faint:  rgba(201,123,42,0.2);
}

[data-md-color-scheme="slate"],
[data-md-color-scheme="slate"] .md-typeset,
[data-md-color-scheme="slate"] .md-nav,
[data-md-color-scheme="slate"] .md-search__input,
[data-md-color-scheme="slate"] .md-footer {
  font-family: 'IBM Plex Sans', sans-serif !important;
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4 {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--pp-ink) !important;
  border-bottom-color: var(--pp-rule) !important;
}

[data-md-color-scheme="slate"] .md-typeset code,
[data-md-color-scheme="slate"] .md-typeset pre,
[data-md-color-scheme="slate"] .md-typeset kbd {
  font-family: 'IBM Plex Mono', monospace !important;
}

/* Dark mode links */
[data-md-color-scheme="slate"] .md-typeset a {
  color: #7b93d4 !important;
  text-decoration-color: rgba(123, 147, 212, 0.4) !important;
}
[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #a0b4e8 !important;
}

/* Dark mode tables */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: #2a3870 !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}

/* Dark mode code */
[data-md-color-scheme="slate"] .md-typeset code {
  background: rgba(61, 82, 160, 0.15) !important;
  color: #a0b4e8 !important;
  border-color: rgba(61, 82, 160, 0.3) !important;
  font-family: 'IBM Plex Mono', monospace !important;
}

/* Dark mode blockquote */
[data-md-color-scheme="slate"] .md-typeset blockquote {
  background: rgba(61, 82, 160, 0.12) !important;
  border-left-color: #5a6fc4 !important;
  color: var(--pp-ink-mid) !important;
}

/* Dark mode table cells */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
  color: var(--pp-ink-mid) !important;
  border-top-color: var(--pp-rule) !important;
}

/* ═══════════════════════════════════════════════════════════
   PRINT STYLES
═══════════════════════════════════════════════════════════ */
@media print {
  nav,
  .md-sidebar,
  .md-header,
  .md-footer,
  .md-tabs,
  .md-top,
  .giscus,
  .md-source,
  .md-search {
    display: none !important;
  }
  .md-content {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 20px !important;
  }
  .md-main__inner { margin: 0 !important; }
  .admonition, details {
    break-inside: avoid;
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em; color: #666; word-break: break-all;
  }
  a[href^="/"]::after,
  a[href^="#"]::after,
  a[href^="../"]::after { content: none; }
  table { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  .md-typeset .admonition.tldr { background: #f5f5f5 !important; }
}