:root {
    --tenant-primary-color-rgb: 0, 168, 45; /* RGB from HEX */
    --tenant-primary-contrast-color-rgb: 0, 0, 0; /* RGB from HEX */
    --background-color-alpha: 0.45; /* transparency */
}

h1 {
    text-align: center;
}

nav.navbar img#logo {
    max-width: 36px;
    max-height: 36px;
    margin-right: 10px;
}

.dropdown-item.active,
.dropdown-item:active {
    color: rgba(var(--tenant-primary-contrast-color-rgb), 0.75) !important;
    background-color: rgba(var(--tenant-primary-color-rgb), 0.75) !important;
}

article p.article-image-wrapper {
    text-align: center;
    padding: 0.75em 1em;
    background:
        linear-gradient(
            to bottom,
            transparent 22.5%,
            rgba(var(--tenant-primary-color-rgb), 0.35) 22.5% 55%,
            transparent 55%
        ) left center / 1px 100% no-repeat,
        linear-gradient(
            to bottom,
            transparent 22.5%,
            rgba(var(--tenant-primary-color-rgb), 0.35) 22.5% 55%,
            transparent 55%
        ) right center / 1px 100% no-repeat;
}

article div.tabGroup p.article-image-wrapper {
    background: none;
}

article p.article-image-wrapper img {
    display: block;
    margin: 0 auto;
}

article p.article-image-wrapper a {
  display: inline-block;
}

article p.article-image-wrapper .image-title-caption {
    margin: 0.55em 0.2rem 0.3em 0.2em;
    font-size: 0.85rem;
    line-height: 1.3;
    text-align: center;
    color: rgba(var(--tenant-primary-color-rgb), 0.85);
}

@media print {
    /*
    @page :left {
        margin: 3mm 25mm 10mm 7mm !important;
    }

    @page :right {
        margin: 3mm 7mm 10mm 25mm !important;
    }
    */

    @page {
        margin: 3mm 17mm 10mm 17mm !important;
    }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;

        font-size: 10pt;
    }

    /* Hide elements that only make sense on the web (e.g. PDF download links) */
    .no-print {
        display: none !important;
    }

    /* Force a page break before this element */
    .page-break-before {
        page-break-before: always; /* Old syntax */
        break-before: page;        /* Modern syntax */
    }

    /* Force a page break after this element */
    .page-break-after {
        page-break-after: always; /* Old syntax */
        break-after: page;        /* Modern syntax */
    }

    h1 {
        text-align: start;
        background-color: rgba(
            var(--tenant-primary-color-rgb, 150, 150, 150),
            var(--background-color-alpha, 0,5)
        );
    }

    article p.article-image-wrapper {
        background: none;
        border: none;

        break-inside: avoid;
        page-break-inside: avoid;
        break-before: avoid;
        page-break-before: avoid;
    }

    /* Remove link (hand) cursor from images in print
       Did not work, may remove the a-element via JS
    */
    article p.article-image-wrapper a,
    article p.article-image-wrapper img {
        cursor: none !important;
        pointer-events: none;
    }

    article p.article-image-wrapper img {
        max-width: 100%;
        /* A4 content height minus top/bottom margins and 30mm offset (297mm - 3mm - 10mm - 30mm = 254mm).
           Chromium headless does not map vh to page height in PDF mode,
           so we use an explicit mm value to cap images to one page. */
        max-height: 254mm;
        height: auto;
        width: auto;
    }

    article p.article-image-wrapper .image-title-caption {
        font-weight: bold;
    }

    /* article_INVALID::after {
        content: "WATERMARK";

        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-30deg);
        font-size: 6rem;
        font-weight: 700;
        color: rgb(219, 219, 219);
        white-space: nowrap;

        z-index: -10;
        pointer-events: none;
    }

    body_INVALID::after {
        content: "Lorem Ipsum";

        position: fixed;
        bottom: 0;
        left: 20mm;
        width: 20mm;
        height: 150mm;
        background-color: red;
        color: rgba(0, 0, 0, 0.15);
        white-space: nowrap;

        z-index: 300;
        pointer-events: none;
    } */

}

/* ####################### */
/* #region Audience badges */
.audience-badge {
    display: inline-block;
    padding: 0.2em 0.65em;
    margin-left: 1.15em;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.085em;
    text-transform: uppercase;
    border-radius: 0.3em;
    vertical-align: middle;
    white-space: nowrap;
}

.audience-badge--admin {
    background-color: #dc3545;
    color: #fff;
}

.audience-badge--internal {
    background-color: #fd7e14;
    color: #fff;
}

.audience-badge--developer {
    background-color: #0d6efd;
    color: #fff;
}

.audience-badge--pdf {
    /* Adobe RED */
    background-color: #fff;
    color: #b20a01;
    border: 2px solid #b20a01;
}
/* #endregion Audience badges END */

/* ######################### */
/* #region Language selector */
#language-selector .dropdown-toggle {
    font-size: 0.85rem;
}

#language-selector #lang-current-label {
    font-weight: 600;
}

#language-selector {
  margin-left: auto;
  display: flex;
  align-items: center;
}

#language-selector .btn {
  font-size: 0.875rem;
  line-height: 1.2;
  min-height: auto;
}

#language-selector .bi-translate {
  font-size: 0.95rem;
}
/* #endregion Language selector */

/* #################### */
/* #region CSS Tab-View */
/* hide radio buttons */
div.theme-img-tabs input[type="radio"] {
  display: none;
}

/* tab labels */
div.theme-img-tabs label {
  padding: 10px 20px;
  cursor: pointer;
  background: lime;
  border: 1px solid #ccc;
  margin-right: 2px;
}

/* active tab label style */
div.theme-img-tabs input[type="radio"]:checked + label {
  background: green;
  font-weight: bold;
}

/* container for tab content */
div.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid green;
  border-top: none;
  border-right: none;
}

/* show the content that corresponds to the checked tab */
#tab1:checked ~ #content1 {
  display: block;
}

#tab2:checked ~ #content2 {
 display: block;
}

/* optional: image styling */
div.tab-content img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

@media print {
    div.tabGroup ul[role="tablist"] {
        display: none;
    }

    div.theme-img-tabs input[type="radio"] {
        display: none;
    }

    div.theme-img-tabs label {
        display: none;
    }

    div.theme-img-tabs div.tab-content {
        border: none;
    }
}
/* #endregion CSS Tab-View */

/* ######################## */
/* #region DocFx embed Tabs */
/* https://dotnet.github.io/docfx/docs/markdown.html#tabs */
div.tabGroup img {
    margin: 0 auto;
    display: block;
}

@media print {
  /* Hide the tab buttons */
  div.tabGroup ul[role="tablist"] {
    display: none !important;
  }

  /* Hide only inactive panels (they carry hidden="hidden" and aria-hidden="true") */
  div.tabGroup [role="tabpanel"][hidden] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Active panel has no [hidden] attribute — just ensure it renders as block */
  div.tabGroup [role="tabpanel"]:not([hidden]) {
    display: block !important;
  }

  /* Optional: remove card/chrome visuals for print */
  div.tabGroup [role="tabpanel"].card {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  div.tabGroup [role="tabpanel"] p.article-image-wrapper {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  div.tabGroup [role="tabpanel"] img {
    margin: 3mm auto;
    /* We set height and width to fixed ~75% of DinA4,
       so we are safe without any math */
    max-width: 150mm !important;
    max-height: 190mm !important;
    height: auto !important;
    width: auto !important;
  }
}
/* #endregion DocFx embed Tabs */

/* ########################################################### */
/* #region KeyBoard, Mouse symbols (copied from inkscape docu) */
kbd.mousebutton {
    padding: unset;
    font-size: unset;
    background-color: unset;
    border-radius: unset;
}

kbd.mousebutton::before {
    display: inline-block;
    content: " ";
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: cover;
    vertical-align: middle;
}

html[data-bs-theme="light"] kbd.mousebutton::before {
    background-image: url(/assets/svgs/mouse-light.svg);
}

html[data-bs-theme="dark"] kbd.mousebutton::before {
    background-image: url(/assets/svgs/mouse-dark.svg);
}

kbd.mousebutton.click::before              { background-position: 0 -24px }
kbd.mousebutton.double-click::before       { background-position: 0 -48px }
kbd.mousebutton.middle-click::before       { background-position: 0 -72px }
kbd.mousebutton.right-click::before        { background-position: 0 -96px }
kbd.mousebutton.mouse-wheel::before        { background-position: 0 -120px }
kbd.mousebutton.mouse-drag::before         { background-position: 0 -144px }
kbd.mousebutton.middle-button-drag::before { background-position: 0 -168px }
kbd.mousebutton.right-button-drag::before  { background-position: 0 -192px }

/* #endregion KeyBoard, Mouse symbols (copied from inkscape docu) */

/* ###################### */
/* #region Draft sections */

.draft-blur-do-not-print {
    position: relative;
    pointer-events: none;
    user-select: none;
    border-left: 1px solid #c00;
    border-right: 3px solid #c00;
    padding: 2em 0 2em 0.75rem;
    margin: 1rem 0;
}

/* blur only the actual content, not the badge pseudo-elements */
.draft-blur-do-not-print > * {
    opacity: 0.25;
    filter: blur(2px);
}

.draft-blur-do-not-print::before,
.draft-blur-do-not-print::after {
    position: absolute;
    left: -3px;
    z-index: 10;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #fff;
    background: #c00;
    padding: 0.25em 0.5em;
    border-radius: 0 3px 3px 0;
    pointer-events: none;
    margin: 0 1rem;
}

.draft-blur-do-not-print::before {
    content: "/// DRAFT Begin \\\\\\";
    top: 0.25rem;
}

.draft-blur-do-not-print::after {
    content: "\\\\\\ DRAFT End ///";
    bottom: 0.25rem;
}

@media print {
    /* Copy to PDF coverpage as well */
    .draft-blur-do-not-print {
        display: none !important;
    }
}

/* #endregion Draft sections */

/* ################### */
/* #region Copy page button */
/* DocFX's modern template hides every direct child of .content except <article>
   (body > main > .content > :not(article)); explicitly allow-list this element
   the same way it does for .actionbar / .contribution / .next-article */
body > main > .content > .copy-page-bar,
body[data-layout="landing"] > main > .content > .copy-page-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.copy-page-action .bi-clipboard-check {
    color: rgb(var(--tenant-primary-color-rgb));
}
/* #endregion Copy page button */