/* ===========================================================================
   TMS FNC UI Pack v2 docs - DocFX template overrides
   =========================================================================== */

/* Navbar: keep DocFX's stock balance — the search form and the theme picker both
   live inside #navbar and are laid out by DocFX's own CSS (same as the reference
   product sites). Only constrain the brand so the long site name + logo never
   overflow the flex-nowrap bar. */
.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    max-width: min(22rem, 45vw);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
}

.navbar-brand #logo {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.navbar .dropdown-menu {
    max-height: min(32rem, calc(100vh - 5rem));
    overflow-y: auto;
}

.tms-search-open {
    margin-top: 0;
}

.tms-search-panel {
    margin: 1rem 0 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-body-bg);
    overflow: hidden;
}

.tms-search-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.tms-search-heading {
    font-weight: 600;
}

.tms-search-subheading,
.tms-search-status,
.tms-search-path {
    color: var(--bs-secondary-color);
    font-size: .8125rem;
}

.tms-search-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    justify-content: flex-end;
}

.tms-search-tab {
    padding: .25rem .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: .8125rem;
    line-height: 1.2;
}

.tms-search-tab.active {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: var(--bs-white);
}

.tms-search-tab span {
    color: inherit;
    opacity: .75;
}

.tms-search-table-wrap {
    max-height: min(34rem, calc(100vh - 12rem));
    overflow: auto;
}

.tms-search-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.tms-search-table th,
.tms-search-table td {
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--bs-border-color);
    vertical-align: top;
}

.tms-search-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.tms-search-table th:first-child,
.tms-search-table td:first-child {
    width: 34%;
}

.tms-search-table th:nth-child(2),
.tms-search-table td:nth-child(2) {
    width: 7.5rem;
}

.tms-search-table th:nth-child(3),
.tms-search-table td:nth-child(3) {
    width: 7rem;
}

.tms-search-title-link {
    font-weight: 600;
    text-decoration: none;
}

.tms-search-title-link code {
    overflow-wrap: anywhere;
}

.tms-search-title-link:hover,
.tms-search-title-link:focus {
    text-decoration: underline;
}

.tms-search-kind {
    display: inline-block;
    padding: .125rem .375rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    line-height: 1.2;
    text-transform: capitalize;
}

.tms-search-status {
    padding: 1rem;
}

.tms-search-hint {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .75rem;
    white-space: nowrap;
}

.tms-search-hint kbd {
    padding: .05rem .3rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: .7rem;
    line-height: 1.3;
}

.tms-search-table mark {
    padding: 0 .1em;
    border-radius: .15rem;
    background: var(--bs-warning-bg-subtle, rgba(255, 213, 79, .45));
    color: inherit;
}

.tms-search-table tbody tr.is-active-result {
    background: var(--bs-primary-bg-subtle);
    box-shadow: inset 3px 0 0 0 var(--bs-primary);
}

.tms-search-table tbody tr.is-active-result .tms-search-title-link {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .tms-search-header {
        display: block;
    }

    .tms-search-tabs {
        justify-content: flex-start;
        margin-top: .75rem;
    }

    .tms-search-table,
    .tms-search-table thead,
    .tms-search-table tbody,
    .tms-search-table tr,
    .tms-search-table th,
    .tms-search-table td {
        display: block;
        width: 100% !important;
    }

    .tms-search-table thead {
        display: none;
    }

    .tms-search-table tr {
        padding: .75rem;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .tms-search-table td {
        padding: .25rem 0;
        border: 0;
    }
}

article table {
    display: table;
    width: 100%;
    margin: 1.25rem 0 1.75rem;
    border: 1px solid var(--bs-border-color);
    border-collapse: collapse;
}

article table th,
article table td {
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--bs-border-color);
    vertical-align: top;
}

article table thead th {
    background: var(--bs-tertiary-bg);
    font-weight: 600;
}

article table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--bs-tertiary-bg) 45%, transparent);
}

article table td:first-child code {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

article h1 {
    margin-bottom: 1.25rem;
}

article h2 {
    margin-top: 2.35rem;
    padding-top: 0.35rem;
    margin-bottom: 1rem;
}

article h3 {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

article h4,
article h5 {
    margin-top: 1.35rem;
    margin-bottom: 0.6rem;
}

article p,
article ul,
article ol {
    margin-bottom: 1rem;
}

article img {
    max-width: 100%;
    height: auto;
}

article p > img:only-child {
    display: block;
    margin: 1.25rem 0 1.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
}

/* Calm presentation panel for light-background screenshots (legacy captures,
   UI mockups). A pure-white card glares against the dark theme, so the surface
   is a muted off-white and the dark-theme override below softens it further
   with a low-contrast border, gentle shadow, and a slight brightness pull so
   the image sits on the page instead of punching a hole in it. */
article .screenshot-light {
    display: inline-block;
    max-width: 100%;
    margin: 1.25rem 0 1.5rem;
    padding: 0.75rem;
    border: 1px solid rgba(33, 37, 41, 0.14);
    border-radius: var(--bs-border-radius);
    background: #fbfbfc;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.12);
}

article .screenshot-light img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: calc(var(--bs-border-radius) * 0.75);
    background: transparent;
}

/* Dark theme: a muted light panel (not pure white) with a soft inner ring and
   a slightly reduced brightness so a bright capture no longer glares. */
[data-bs-theme="dark"] article .screenshot-light {
    background: #e9eaec;
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45),
                inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

[data-bs-theme="dark"] article .screenshot-light img {
    filter: brightness(0.96);
}

/* Themed screenshot pair: a light capture and a dark capture. The screenshot-
   theme toggle in the navbar (rendered by main.js) chooses auto | light | dark;
   in auto (the default) screenshots follow the page theme, otherwise they are
   pinned. Either way the RESOLVED light/dark value lands in data-screenshot-theme
   (set before paint by the master layout, kept in sync with live theme changes
   by main.js), and these rules key off it. Author with two images carrying
   `light-only` / `dark-only` (the dark file is the `-dark` variant from
   `Build-Screenshot.ps1 -Theme both`):
     <figure class="screenshot-themed">
       <img class="light-only" src="images/grid.png" alt="…">
       <img class="dark-only"  src="images/grid-dark.png" alt="…">
     </figure> */
article .screenshot-themed {
    display: inline-block;
    max-width: 100%;
    margin: 1.25rem 0 1.5rem;
}

article .screenshot-themed img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

/* Light screenshots (default): never show a dark variant. */
[data-screenshot-theme="light"] article .screenshot-themed .dark-only { display: none; }
/* Dark screenshots: prefer the dark variant and hide the light one — but only
   when a dark variant is actually present in the figure. When no `.dark-only`
   image was produced (a dark capture was not required or not feasible), keep
   showing the light image so the figure gracefully falls back to it, slightly
   dimmed so the bright capture does not glare. This lets a guide author always
   reach for `screenshot-themed`: add `.dark-only` when a dark capture exists,
   omit it otherwise, and the figure does the right thing in both modes. */
[data-screenshot-theme="dark"] article .screenshot-themed:has(.dark-only) .light-only { display: none; }
[data-screenshot-theme="dark"] article .screenshot-themed:not(:has(.dark-only)) .light-only { filter: brightness(0.92); }

article .grid > ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

article .grid > ul > li {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 1rem 1.25rem;
    background: var(--bs-body-bg);
}

article .grid > ul > li > p:first-of-type {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

article .grid > ul > li hr {
    margin: 0.5rem 0;
    opacity: 0.4;
}

/* ---------------------------------------------------------------------------
   Component-scoped navigation pane
   --------------------------------------------------------------------------- */

.component-toc {
    display: none;
    flex: 0 0 20rem;
    max-width: 20rem;
    align-self: flex-start;
    position: sticky;
    top: 4rem;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    padding: 0.75rem 0.75rem 1.25rem 0.5rem;
    border-right: 1px solid var(--bs-border-color);
    font-size: 0.875rem;
    line-height: 1.4;
}

@media (min-width: 992px) {
    .component-toc:not(.d-none) {
        display: block;
    }

    /* The default DocFX TOC is disabled (it loads the ~14 MB root toc); on
       wide screens the scoped pane replaces it, so hide the empty column. */
    .toc-offcanvas {
        display: none !important;
    }
}

.component-toc-header {
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem 0.6rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.component-toc-header a {
    color: var(--bs-body-color);
    text-decoration: none;
}

.component-toc-header a:hover {
    color: var(--bs-link-color);
}

.component-toc-list,
.component-toc-children {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.component-toc-children {
    padding-left: 0.85rem;
    border-left: 1px solid color-mix(in srgb, var(--bs-border-color) 65%, transparent);
    margin: 0.15rem 0 0.3rem 0.45rem;
}

.component-toc-item {
    position: relative;
    margin: 0.05rem 0;
}

.component-toc-item > a,
.component-toc-item > .component-toc-group {
    display: block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    color: var(--bs-body-color);
    text-decoration: none;
    overflow-wrap: anywhere;
}

/* Non-link grouping nodes (e.g. "API by component"). Match the surrounding
   tree items — muted and non-clickable, not an uppercase eyebrow. */
.component-toc-item > .component-toc-group {
    color: var(--bs-secondary-color);
    cursor: default;
}

.component-toc-item > .component-toc-branch-label {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.component-toc-item > a:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-link-color);
}

.component-toc-item > .component-toc-branch-label:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-link-color);
}

.component-toc-item > a.active {
    background: color-mix(in srgb, var(--bs-link-color) 12%, transparent);
    color: var(--bs-link-color);
    font-weight: 600;
}

.component-toc-toggle {
    position: absolute;
    left: -0.95rem;
    top: 0.25rem;
    width: 1rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color);
    cursor: pointer;
    line-height: 1;
}

.component-toc-toggle > span::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.3rem 0 0.3rem 0.4rem;
    border-color: transparent transparent transparent currentColor;
    transition: transform 0.15s ease;
}

.component-toc-item.is-open > .component-toc-toggle > span::before {
    transform: rotate(90deg);
}

.component-toc-item:not(.is-open) > .component-toc-children {
    display: none;
}

/* Hide on narrow viewports — the existing offcanvas TOC handles small screens. */
@media (max-width: 991.98px) {
    .component-toc {
        display: none !important;
    }
}