:root>* {
    --md-accent-fg-color: #ff8504;
    --md-primary-fg-color: #ff8504;
    --md-typeset-a-color: #0097ff;
}

[data-md-color-scheme="slate"] {
    --md-default-bg-color: hsla(var(--md-hue), 0%, 15%, 1);
    --md-typeset-a-color: #0097ff;
}

/* Accessibility: Increase fonts for dark theme */
[data-md-color-scheme="slate"] .md-typeset {
    font-size: 0.9rem;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
    font-size: 0.7rem;
}

/*
* The default max-width is 61rem which does not provide nearly enough space to present code examples or larger tables
*/
.md-grid {
    margin-left: auto;
    margin-right: auto;
    max-width: 95%;
}

.md-tabs__link {
    font-size: 0.8rem;
}

.md-tabs__link--active {
    color: var(--md-primary-fg-color);
}

.md-header__button.md-logo :is(img, svg) {
    height: 2rem;
}

.md-header__button.md-logo :-webkit-any(img, svg) {
    height: 2rem;
}

.md-header__title {
    font-size: 1.2rem;
}

img.logo {
    height: 200px;
}

[data-md-color-primary=black] .md-header {
    background-color: #212121;
}

@media screen and (min-width: 76.25em) {
    [data-md-color-primary=black] .md-tabs {
        background-color: #212121;
    }
}

/* Customization for mkdocstrings */
div.doc-contents:not(.first) {
    padding-left: 25px;
    border-left: .2rem solid var(--md-typeset-table-color);
}

a.autorefs-external::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="rgb(0, 0, 0)" d="M18.25 15.5a.75.75 0 00.75-.75v-9a.75.75 0 00-.75-.75h-9a.75.75 0 000 1.5h7.19L6.22 16.72a.75.75 0 101.06 1.06L17.5 7.56v7.19c0 .414.336.75.75.75z"></path></svg>');
    content: ' ';
    display: inline-block;
    position: relative;
    top: 0.1em;
    margin-left: 0.2em;
    margin-right: 0.1em;
    height: 1em;
    width: 1em;
    border-radius: 100%;
    background-color: var(--md-typeset-a-color);
}

a.autorefs-external:hover::after {
    background-color: var(--md-accent-fg-color);
}

/* markdown-version-annotations admonition icons */
:root {
    --md-admonition-icon--version-added: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 19V5H5v14h14m0-16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-8 4h2v4h4v2h-4v4h-2v-4H7v-2h4V7Z"/></svg>');
    --md-admonition-icon--version-changed: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 7.77 18.39 18H5.61L12 7.77M12 4 2 20h20"/></svg>');
    --md-admonition-icon--version-removed: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2M7 13h10v-2H7"/></svg>');
}

.md-typeset .admonition.version-added,
.md-typeset details.version-added {
    border-color: rgb(0, 200, 83);
}
.md-typeset .version-added>.admonition-title,
.md-typeset .version-added>summary {
    background-color: rgba(0, 200, 83, .1);
}
.md-typeset .version-added>.admonition-title::before,
.md-typeset .version-added>summary::before {
    background-color: rgb(0, 200, 83);
    -webkit-mask-image: var(--md-admonition-icon--version-added);
    mask-image: var(--md-admonition-icon--version-added);
}

.md-typeset .admonition.version-changed,
.md-typeset details.version-changed {
    border-color: rgb(255, 145, 0);
}
.md-typeset .version-changed>.admonition-title,
.md-typeset .version-changed>summary {
    background-color: rgba(255, 145, 0, .1);
}
.md-typeset .version-changed>.admonition-title::before,
.md-typeset .version-changed>summary::before {
    background-color: rgb(255, 145, 0);
    -webkit-mask-image: var(--md-admonition-icon--version-changed);
    mask-image: var(--md-admonition-icon--version-changed);
}

.md-typeset .admonition.version-removed,
.md-typeset details.version-removed {
    border-color: rgb(255, 82, 82);
}
.md-typeset .version-removed>.admonition-title,
.md-typeset .version-removed>summary {
    background-color: rgba(255, 82, 82, .1);
}
.md-typeset .version-removed>.admonition-title::before,
.md-typeset .version-removed>summary::before {
    background-color: rgb(255, 82, 82);
    -webkit-mask-image: var(--md-admonition-icon--version-removed);
    mask-image: var(--md-admonition-icon--version-removed);
}

div.md-typeset__table>table>tbody>tr>td>code {
    white-space: nowrap;
}

/* Screenshots ----------------------------------------------- */

/* Generous breathing room, subtle border, soft shadow. The :not() chain
 * excludes the Nautobot SVG logo (header chrome) and the NTC copyright
 * logo (footer chrome) — without these exclusions, those small marks
 * would inherit the screenshot styling and look broken. */
.md-typeset img:not([src*=".svg"]):not(.copyright-logo) {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

/* glightbox wraps each screenshot in an <a class="glightbox">. Style the
 * wrapper so the click target visibly matches the image, and show a
 * "click to zoom" cursor since glightbox makes them interactive. */
.md-typeset a.glightbox {
    display: block;
    margin: 3rem auto;
    cursor: zoom-in;
    text-decoration: none;
}

.md-typeset a.glightbox img {
    margin: 0 auto;       /* avoid double-margin when nested in <a> */
}

/* Hover: subtle lift + brighter shadow. Cues "this is interactive"
 * without the over-the-top scale-up that some sites use. */
.md-typeset a.glightbox:hover img {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

/* Honor reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .md-typeset img,
    .md-typeset a.glightbox:hover img {
        transition: none;
        transform: none;
    }
}

/* Dark mode: stronger shadow, faintly lighter border. Mirrors the
 * "lifted artifact" feel from light mode but tuned for the dark
 * background where soft shadows tend to disappear. */
[data-md-color-scheme="slate"] .md-typeset img:not([src*=".svg"]):not(.copyright-logo) {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-md-color-scheme="slate"] .md-typeset a.glightbox:hover img {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
}

.md-typeset a.glightbox {
    text-align: center;
    position: relative;
}

/* Tiny magnifier-glass icon in the bottom-right of each screenshot.
 * Hidden by default; fades in on hover to cue "click to zoom".
 * The SVG is the Material Design "magnify-plus-outline" icon, embedded
 * inline so we don't need a separate asset file. */
.md-typeset a.glightbox::after {
    content: "";
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.6);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm2.5-4h-2v2H9v-2H7V9h2V7h1v2h2v1z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.2rem;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 200ms ease, transform 200ms ease;
    pointer-events: none;
}

.md-typeset a.glightbox:hover::after {
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .md-typeset a.glightbox::after,
    .md-typeset a.glightbox:hover::after {
        transition: none;
        transform: none;
    }
}