/* AL syntax highlighting color theme for highlight.js */

.line-highlight {
	background-color: #ffc;
}

.hljs-comment {
	color: #008000;
}

.hljs-pscommand,
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-string .hljs-subst,
.hljs-tag {
	color: #0101fd;
}

.hljs-literal {
	color: #098155;
}

/* Substrings, such as in C# interpolation https://github.com/dotnet/docfx/issues/3226 */
.hljs-string .hljs-subst,
.hljs-attr {
	color: #0451a5;
}

.hljs-string,
.hljs-string .hljs-subst .hljs-string,
.hljs-section,
.hljs-template-tag,
.hljs-template-variable,
.hljs-deletion,
.hljs-code {
	color: #a31515;
}

.hljs-parameter,
.hljs-type,
.hljs-attribute,
.hljs-title,
.hljs-addition,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta {
	color: #007792;
}

.hljs-doctag {
	color: #6d6d6d;
}

.hljs-control {
	color: #af00db;
}

.hljs-helper {
	color: #795e26;
}

.hljs-symbol,
.hljs-bullet,
.hljs-link {
	color: #006bd6;
}

.hljs-emphasis {
	font-style: italic;
}

.hljs-strong {
	font-weight: 600;
}

.hljs-reserved,
.hljs-constant {
	color: #cd3131;
}

/* ============================================================
   SMARTAPPS BRAND & UI CUSTOMIZATIONS
   Migrated from _templates_OLD/smartapps/styles/main.css
   and adapted for DocFX modern template (Bootstrap 5)
   ============================================================ */

/* COLOR VARIABLES */

:root {
  --highlight-light: #6DE3C8;
  --highlight-dark: #4773DC;
  --card-box-shadow: 0 1px 2px 0 rgba(61, 65, 68, 0.06), 0 1px 3px 1px rgba(61, 65, 68, 0.16);
  --overview-app-shadow: rgba(23, 28, 36, 0.15);
  /* Bootstrap 5 link color override */
  --bs-link-color: #4773DC;
  --bs-link-hover-color: #6DE3C8;
  --bs-link-color-rgb: 71, 115, 220;
}

[data-bs-theme="dark"] {
  --overview-app-shadow: rgba(0, 0, 0, 0.4);
}

/* APP CARDS (used in sites/en-US/index.md) */

.app-wrapper {
  margin-bottom: 10px;
}

.app-wrapper-item {
  margin-bottom: 10px;
  padding: 10px;
}

@media only screen and (min-width: 768px) {
  .app-wrapper {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .app-wrapper-item {
    width: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
}

@media only screen and (min-width: 1300px) {
  .app-wrapper-item {
    width: 33.33%;
    flex-basis: 33.33%;
    max-width: 33.33%;
  }
}

.app-wrapper-item-inner {
  position: relative;
  background-color: var(--bs-body-bg);
  padding: 40px 20px;
  text-align: center;
  height: 100%;
  box-shadow: 0px 7px 20px var(--overview-app-shadow);
  border-radius: 4px;
}

.app-wrapper-item-inner-headline {
  margin-bottom: 10px;
}

.app-wrapper-item-img {
  max-width: 55%;
  border-radius: 200px;
  margin-bottom: 20px;
}

.app-wrapper-item-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--bs-body-color);
  margin-bottom: 74px;
}

.is-text {
  color: var(--bs-body-color);
}

.is-text:hover {
  color: var(--bs-body-color);
  opacity: 0.75;
}

.custom-button {
  color: var(--highlight-dark);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  display: block;
  padding: 5px 0;
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translate(-50%, 0);
  white-space: nowrap;
  transition: color 250ms ease-in-out;
}

.custom-button:hover {
  color: var(--highlight-light);
}

@media only screen and (max-width: 768px) {
  .custom-button {
    padding: 10px 20px;
    width: fit-content;
    margin: 0 auto;
    margin-top: 30px;
  }
}

/* ALERT BLOCKS
   Modern DocFX template wraps alerts as <div class="NOTE"> (no .alert class)
   Old template used .alert.NOTE — selectors updated accordingly. */

div.NOTE,
div.TIP,
div.IMPORTANT,
div.WARNING,
div.CAUTION {
  padding: 15px 10px;
  border-radius: 10px;
  margin-bottom: 1rem;
  border: none;
}

div.NOTE > p,
div.TIP > p,
div.IMPORTANT > p,
div.WARNING > p,
div.CAUTION > p {
  margin-bottom: 0;
  padding: 5px 10px;
}

div.NOTE > ul,
div.TIP > ul,
div.IMPORTANT > ul,
div.WARNING > ul,
div.CAUTION > ul {
  margin-bottom: 0;
  padding: 5px 40px;
}

div.NOTE > h5,
div.TIP > h5,
div.IMPORTANT > h5,
div.WARNING > h5,
div.CAUTION > h5 {
  padding: 10px 15px;
  font-size: 16px;
  margin-top: 0;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
  text-transform: none;
  margin-bottom: 0;
}

div.NOTE > h6,
div.TIP > h6,
div.IMPORTANT > h6,
div.WARNING > h6,
div.CAUTION > h6 {
  padding: 10px 10px 0;
  font-size: 16px;
  margin-top: 0;
  font-weight: bold;
  text-transform: none;
  margin-bottom: 0;
}

div.NOTE > h5::before,
div.TIP > h5::before,
div.IMPORTANT > h5::before,
div.WARNING > h5::before,
div.CAUTION > h5::before {
  font-family: bootstrap-icons;
  position: relative;
  margin-right: 0.5em;
  top: 0.2em;
  font-size: 1.25em;
  font-weight: 400;
}

div.NOTE > h5::before {
  content: "\f430"; /* bi-info-circle-fill */
}

div.TIP > h5::before {
  content: "\f468"; /* bi-lightbulb-fill */
}

div.IMPORTANT > h5::before {
  content: "\f332"; /* bi-exclamation-circle-fill */
}

div.WARNING > h5::before {
  content: "\f33a"; /* bi-exclamation-triangle-fill */
}

div.CAUTION > h5::before {
  content: "\f566"; /* bi-slash-circle-fill */
}

div.TIP {
  background-color: #d2f9d2;
}
div.TIP > h5 {
  color: #094409;
}
div.TIP > h6 {
  color: #094409;
}

div.NOTE {
  background-color: #e2daf1;
}
div.NOTE > h5 {
  color: #38225d;
}
div.NOTE > h6 {
  color: #38225d;
}

div.IMPORTANT {
  background-color: #e0f2ff;
}
div.IMPORTANT > h5 {
  color: #002b4d;
}
div.IMPORTANT > h6 {
  color: #002b4d;
}

div.WARNING {
  background-color: #fff4ce;
}
div.WARNING > h5 {
  color: #8e562e;
}
div.WARNING > h6 {
  color: #8e562e;
}

div.CAUTION {
  background-color: #fed9cc;
}
div.CAUTION > h5 {
  color: #975945;
}
div.CAUTION > h6 {
  color: #975945;
}

/* Alert dark mode overrides */

[data-bs-theme="dark"] div.TIP {
  background-color: #1a3a1a;
}
[data-bs-theme="dark"] div.TIP > h5 {
  color: #98d498;
}
[data-bs-theme="dark"] div.TIP > h6 {
  color: #98d498;
}

[data-bs-theme="dark"] div.NOTE {
  background-color: #2d2541;
}
[data-bs-theme="dark"] div.NOTE > h5 {
  color: #c5b8e8;
}
[data-bs-theme="dark"] div.NOTE > h6 {
  color: #c5b8e8;
}

[data-bs-theme="dark"] div.IMPORTANT {
  background-color: #0a2233;
}
[data-bs-theme="dark"] div.IMPORTANT > h5 {
  color: #6dc5f5;
}
[data-bs-theme="dark"] div.IMPORTANT > h6 {
  color: #6dc5f5;
}

[data-bs-theme="dark"] div.WARNING {
  background-color: #3a2e00;
}
[data-bs-theme="dark"] div.WARNING > h5 {
  color: #f5d078;
}
[data-bs-theme="dark"] div.WARNING > h6 {
  color: #f5d078;
}

[data-bs-theme="dark"] div.CAUTION {
  background-color: #3a1a0a;
}
[data-bs-theme="dark"] div.CAUTION > h5 {
  color: #f5a87a;
}
[data-bs-theme="dark"] div.CAUTION > h6 {
  color: #f5a87a;
}

/* CODE HEADER BAR
   Styled to match the old template's language label + copy button.
   The modern DocFX template's built-in .code-action button (floating clipboard
   icon inside <pre>) is hidden since main.js adds a full header bar instead. */

pre > .code-action {
  display: none !important;
}

.code-header {
  box-sizing: content-box;
  background-color: #f2f2f2;
  color: #171717;
  display: flex;
  flex-direction: row;
  border: 1px solid #e3e3e3;
  border-bottom: 0;
  margin-top: 16px;
  min-height: 30px;
  border-radius: 4px 4px 0 0;
}

[data-bs-theme="dark"] .code-header {
  background-color: #2d2d2d;
  color: #e8e8e8;
  border-color: #444;
}

.code-header > .language {
  padding: 2px 16px;
  flex-grow: 1;
  text-transform: uppercase;
  line-height: 26px;
  font-size: 13px;
  font-weight: 500;
}

.code-header > .action {
  padding: 2px 10px;
  background-color: transparent;
  border: 0 solid #e3e3e3;
  border-left-width: 1px;
  color: #171717;
  cursor: pointer;
  display: flex;
  align-items: center;
  line-height: normal;
  transition: background-color 150ms ease;
}

[data-bs-theme="dark"] .code-header > .action {
  color: #e8e8e8;
  border-left-color: #444;
}

.code-header > .action:hover {
  background-color: #e8e8e8;
}

[data-bs-theme="dark"] .code-header > .action:hover {
  background-color: #3a3a3a;
}

.code-header + pre {
  margin-top: 0;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Give pre elements a visible border so they integrate with the code-header */

pre {
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  padding: 9.5px;
}

[data-bs-theme="dark"] pre {
  border-color: #444;
}

/* IMAGES */

p > img {
  box-shadow: 10px 10px 20px -8px rgba(0, 0, 0, 0.56);
}

/* Image size helpers */

.small-image {
  margin-top: 15px;
  box-shadow: var(--card-box-shadow);
  max-width: 350px;
}

.medium-image {
  margin-top: 15px;
  box-shadow: var(--card-box-shadow);
  max-width: 550px;
}

.large-image {
  margin-top: 15px;
  box-shadow: var(--card-box-shadow);
  max-width: 700px;
}

/* LOGO — invert in dark mode so the dark SVG is visible on dark background */

[data-bs-theme="dark"] #logo {
  filter: invert(1);
}

/* MAIN TOC (left-side navigation)
   Use high-specificity selectors to override docfx.min.css's (DocFX 2.78.5 modern template)
   .toc ul li a:hover { text-decoration: underline } rule.
   Match old site: color change on hover, no underline. */

.toc a,
.toc ul li a {
  text-decoration: none;
}

.toc a:hover,
.toc a:focus,
.toc ul li a:hover,
.toc ul li a:focus {
  text-decoration: none;
  color: var(--highlight-light);
}

.toc li.active > a,
.toc ul li.active > a {
  color: var(--highlight-dark);
}

[data-bs-theme="dark"] .toc a:hover,
[data-bs-theme="dark"] .toc a:focus,
[data-bs-theme="dark"] .toc ul li a:hover,
[data-bs-theme="dark"] .toc ul li a:focus {
  color: var(--highlight-light);
}

[data-bs-theme="dark"] .toc li.active > a,
[data-bs-theme="dark"] .toc ul li.active > a {
  color: var(--highlight-light);
}

/* IN-PAGE TOC (right-side "In this article" navigation)
   text-decoration: none overrides docfx.min.css's (DocFX 2.78.5 modern template) underline on hover.
   Color change on hover/active matches the brand palette. */

.affix ul li a:hover,
.affix ul li a:focus {
  text-decoration: none;
  color: var(--highlight-dark);
}

[data-bs-theme="dark"] .affix ul li a:hover,
[data-bs-theme="dark"] .affix ul li a:focus {
  color: var(--highlight-light);
}

/* INLINE CODE */

:not(pre) > code {
  color: #171717;
  background-color: #e3e3e3;
  border-radius: 4px;
  padding: 0.1em 0.3em;
}

[data-bs-theme="dark"] :not(pre) > code {
  color: #e8e8e8;
  background-color: #3a3a3a;
}

/* HEADINGS — slightly reduced sizes + balanced whitespace */

h1 { font-size: 2.00rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }

article h1 {
  margin-bottom: 0.75rem;
}

article h2,
article h3,
article h4 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}