/* ===================================================================
   Spotfire help theme (screen.css)
   Drives the Spotfire help look on top of the dita-bootstrap 5 DOM
   (header role=banner / #content > .sidebar-container + main[role=main]).
   Bootstrap's own CSS is NOT loaded (only bootstrap-icons), so this file
   drives the entire grid itself and the emitted Bootstrap classes —
   container-xxl, col-lg-3, d-flex, me-3 — are inert. Self-contained: no
   Bootstrap or jQuery.
   =================================================================== */

/* ---------- Fonts ---------- */
@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --bs-font-monospace: monospace;
}

/* ---------- Reset / base shell ---------- */
*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    outline: 0;
    box-sizing: border-box;
}

i::before,
i::after {
    content: none !important;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    font-family: "Roboto", "Helvetica", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #666666;
    background: #fff;
}

/* ---------- Header (from includes/spotfire-navbar.hdr.xml) ---------- */
header[role="banner"] {
    flex: 0 0 60px;
    max-width: 1400px;
    width: 100%;
    margin: auto;
}

/* The html5-bootstrap pipeline also emits a server-rendered breadcrumb inside
   the banner. We render our own breadcrumb trail above the content (built by
   spotfire-help.js), so suppress the native one here to
   keep the header a clean 60px bar. */
header[role="banner"] > .breadcrumb {
    display: none;
}

.app-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 60px;
    padding: 10px;
}

/* Burger + logo grouped on the left. */
.logo-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
}

.app-logo {
    display: inline-block;
    width: 141px;
    height: 40px;
    flex: 0 0 auto;
    background: url("logo.png") no-repeat left center;
    background-size: contain;
    text-decoration: none;
}

#article-title {
    color: #336699;
    font-size: 21px;
    font-weight: 300;
    line-height: 1;
}

.app-title {
    flex: 1 1 auto;
    margin: 0;
    color: #336699;
    font-size: 21px;
    font-weight: 300;
    line-height: 1;
    text-align: center;
}

.app-search {
    display: flex;
    align-items: center;
    margin-left: auto;
    flex: 0 0 auto;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    overflow: hidden;
}
.app-search__field {
    border: 0;
    outline: 0;
    padding: 0 25px 0 12px;
    font-family: inherit;
    height: 36px;
    width: 100%;
    color: #b2b2b2;
    margin-left: 10px;
    transition: color 0.4s;
    font-size: 16px;
}

.app-search .app-search__field:focus,
.app-search .app-search__field:hover {
    color: #666;
}

.app-search__btn {
    border: 0;
    background: transparent;
    padding: 4px 10px;
    cursor: pointer;
    color: #326fb7;
}

/* Mobile burger toggles the off-canvas TOC. Hidden on desktop. */
.app-burger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    margin-right: 15px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.app-burger span {
    display: block;
    height: 4px;
    width: 100%;
    background: #326fb7;
    border-radius: 2px;
    transition:
        rotate 0.2s ease,
        translate 0.2s ease 0.2s,
        opacity 0.2s ease;
}

.app-burger[aria-expanded="true"] span {
    transition:
        translate 0.2s ease,
        rotate 0.2s ease 0.2s,
        opacity 0.2s ease;
}
.app-burger[aria-expanded="true"] span:nth-child(1) {
    translate: 0 7px;
    rotate: 45deg;
}
.app-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.app-burger[aria-expanded="true"] span:nth-child(3) {
    translate: 0 -7px;
    rotate: -45deg;
}

#content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    /* Explicit nowrap so the sidebar + content never stack. */
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    min-height: 0;
    padding: 0;
}

/* Sidebar / TOC */
.sidebar-container {
    flex: 0 0 35%;
    max-width: 420px;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 10px;
    position: relative;
    transition: transform 0.3s ease;
}

.sidebar-container-section {
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}
.sidebar-container-section__head {
    background: #e6e6e6;
    border-radius: 4px 4px 0 0;
    padding: 12px 16px;
    cursor: pointer;
}
.sidebar-container-section__head h5 {
    margin: 0;
    padding-left: 4px;
    color: #000;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}
.sidebar-container-section__body {
    background: #f1f1f1;
    border-left: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    border-radius: 0 0 4px 4px;
    display: none;
    overflow: hidden;
    transition: height 0.25s ease;
}
.sidebar-container-section__body-inner {
    padding: 0;
}

.sidebar-message {
    padding: 5px 0 5px 16px;
    font-size: 14px;
    color: #666666;
}
.sidebar-container-section.is-open > .sidebar-container-section__body {
    display: block;
}

abbr[title] {
    text-decoration: none;
    font-weight: 500;
    color: #000;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-container-section__body,
    .sidebar-container nav li.has-children > ul,
    .app-burger span,
    .app-burger[aria-expanded="true"] span {
        transition: none;
    }
}

/* Search results (rendered by spotfire-search.js into #search). The head
   is laid out as a row so the result-count badge sits opposite the title. */
#search .sidebar-container-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.search-count {
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    min-width: 50px;
    max-width: 100px;
    padding: 1px 7px;
    border-radius: 9px;
    background: #fff;
    color: #1ba4c0;
    font-size: 16px;
    text-align: center;
}
.search-count[hidden] {
    display: none;
}
.search-results {
    list-style: none;
    margin: 0;
    padding: 0;
}
.search-result {
    margin: 0 24px;
    border-bottom: 1px solid #dcdfe8;
}
.search-result:last-child {
    margin-bottom: 0;
    border-bottom: none;
}
.search-result__link {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 12px 12px 12px 0;
}
.search-result__link:hover,
.search-result__link:focus {
    color: black;
}
.search-result__title {
    display: block;
}
.search-result__preview {
    display: block;
    padding-bottom: 12px;
    font-size: 12px;
    line-height: 1.4;
}
.search-result__preview p {
    margin: 0;
}

.sidebar-filter {
    box-sizing: border-box;
    width: 100%;
    height: 31px;
    margin-bottom: 12px;
    padding: 0 10px;
    border: none;
    background: white;
    color: #61646b;
    font-size: 14px;
    transition: color 0.2s;
}
.sidebar-filter:focus {
    outline: none;
}
.sidebar-filter::placeholder {
    color: #a7abb8;
}
.sidebar-filter:hover::placeholder,
.sidebar-filter:focus::placeholder {
    color: #61646b;
}

.results.filtered li {
    display: none;
}
.results.filtered li.filtered {
    display: block;
}
.results.filtered li.filtered ul li {
    display: block;
}
.results.filtered > li.is-visible {
    display: block;
}
.results.filtered > li.is-visible li {
    display: none;
}
.results.filtered > li.is-visible li.filtered {
    display: block;
}

/* While the Glossary is filtered, the DOM :last-child may be hidden, so the
   last VISIBLE match would still show a divider. Drop the border on the last
   shown entry — the .filtered item with no following .filtered sibling.
   (Glossary is the only bordered pane with a filter: Contents has no filter,
   Index has no borders.) */
#glossary .results.filtered li.filtered:not(:has(~ li.filtered)) {
    border-bottom: 0;
}

.sidebar-container .bs-sidebar {
    height: auto;
    position: static;
    padding-left: 0;
    margin-left: 0;
    overflow: visible;
}
.sidebar-container .offcanvas-header {
    display: none;
}

/* Content pane */
main[role="main"] {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-left: 1px solid #e6e6e6;
    padding: 8px 16px 0 16px;
}

.sidebar-container nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar-container nav ul ul {
    padding-left: 12px;
}

/* Nested sub-lists slide open/closed with the same height animation as the
   panes (driven by animateHeight in spotfire-help.js, which sets/clears the
   inline height). overflow:hidden clips the sub-list while it slides; the
   resting show/hide stays governed by the .open/.closed classes below. */
.sidebar-container nav li.has-children > ul {
    overflow: hidden;
    transition: height 0.25s ease;
}
.sidebar-container nav li {
    position: relative;
    border-bottom: 1px solid #dcdfe8;
}

.sidebar-container nav > ul > li {
    margin-left: 24px;
    margin-right: 24px;
}
.sidebar-container nav li li {
    border-bottom: 0;
}

.sidebar-container nav > ul > li:last-child {
    border-bottom: 0;
}

#index nav li {
    border-bottom: 0;
}

#index nav > ul > li {
    margin-top: 6px;
}
.sidebar-container nav a {
    display: block;
    /* The li is the full-width container; the anchor is capped at 100% - 24px so
     the remaining 24px on the right is a reserved gutter. Long titles wrap
     inside the anchor and can never reach the chevron sitting in that gutter,
     so it stays absolutely positioned (below) without overlap risk. box-sizing
     is border-box globally, so this width already includes the padding. */
    width: calc(100% - 24px);
    padding: 12px 12px 12px 0;
    color: #61646b;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    line-height: 1.375;
}
.sidebar-container nav a:hover {
    color: #000;
}
/* Current page / active branch */
.sidebar-container nav li.active > a,
.sidebar-container nav li.current > a,
.sidebar-container nav a.sf-current-page {
    color: #000;
    font-weight: 500;
}

/* Expand / collapse chevron (added to nodes with children by JS) */
.sidebar-container nav li.has-children > .toc-toggle {
    position: absolute;
    top: 14px;
    right: 2px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    background-image: url("arrow_16x16.svg");
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(270deg);
    transition: transform 0.15s ease;
}
.sidebar-container nav li.has-children.open > .toc-toggle {
    transform: rotate(360deg);
}
.sidebar-container nav li.has-children.closed > ul {
    display: none;
}
/* A non-link grouping header wired to expand/collapse on click (index keywords
   with sub-entries) shows the pointer cursor to signal it is clickable. */
.sidebar-container nav a.toc-header-toggle {
    cursor: pointer;
}

/* ---------- Content toolbar (built by JS: .section-toolbar) ---------- */
.section-toolbar {
    display: flex;
    align-items: center;
    background: #e6e6e6;
    border-radius: 4px;
    padding: 6px 10px;
    margin: 8px 0 4px 0;
}
.section-toolbar .list-actions {
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
}
.section-toolbar .list-actions li {
    margin: 0 0 0 6px;
    padding: 0;
}
.toolbar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 3px;
    color: #326fb7;
    text-decoration: none;
}
.toolbar-action:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #062e79;
}
.toolbar-action.is-active {
    background: rgba(50, 111, 183, 0.18);
}

/* ---------- Breadcrumbs (built by JS into main) ---------- */
.app-breadcrumbs {
    padding: 8px 0 4px 0;
    font-size: 14px;
    color: #61646b;
}
.app-breadcrumbs .crumb {
    color: #61646b;
}
.app-breadcrumbs .crumb a {
    color: #61646b;
    text-decoration: none;
}
.app-breadcrumbs .crumb a:hover {
    color: #000;
}
.app-breadcrumbs .sep {
    margin: 0 6px;
    color: #a7abb8;
}
.app-breadcrumbs .current-breadcrumb {
    color: #000;
}

/* ---------- Article / topic content ---------- */
article {
    color: #313336;
}
article[role="article"] {
    padding: 10px;
}

article.topic.task {
    padding: 0;
}

article div.spotfire-version {
    color: #666666;
}

article h1.title,
h1.title.topictitle1 {
    color: #000;
    font-size: 22px;
    font-weight: 500;
    margin: 4px 0 8px 0;
}
article h2,
h2.title.sectiontitle,
h3.sectiontitle,
span.title {
    color: #000;
    font-size: 20px;
    font-weight: 400;
    padding-top: 20px;
    margin: 0 0 10px 0;
}
article h3 {
    color: #000;
    font-size: 18px;
    font-weight: 400;
    padding-top: 16px;
}
article h4 {
    color: #000;
    font-size: 16px;
    font-weight: 500;
}

article p,
.body p,
.p,
.context,
.result,
.postreq {
    font-weight: 400;
    line-height: 1.5;
    margin: 8px 0 0;
    color: #313336;
}

article a,
nav.related-links a,
div.familylinks a.link {
    color: #0081cb;
    text-decoration: none;
}
article a:hover {
    color: #062e79;
}

article ol,
article ul {
    margin-top: 10px;
    padding-left: 22px;
}
article li {
    margin-top: 4px;
    padding-left: 8px;
}

article b,
article strong,
article dt,
article .uicontrol,
article .keyword.wintitle {
    color: #000;
    font-weight: 500;
}

article .nested1 {
    margin-top: 0;
}

article dl.dl dt {
    font-weight: 500;
    margin-top: 12px;
}

li.linklist a,
article li.linklist,
article li.ulchildlink a,
div.familylinks a.link {
    padding-left: 0px;
    font-weight: 400;
    font-size: 14px;
}

.cmdname {
    font-family: monospace;
    font-weight: 600;
}

/* Hide autogenerated 'about this task' label */
.context .tasklabel {
    display: none;
}

/* ---------- Notes ---------- */
article .note {
    padding: 16px;
    border: 1px dashed #d1d4de;
    margin: 8px 0;
    border-radius: 4px;
}
article .note .note__title {
    color: #000;
    font-weight: 500;
}

/* ---------- Tables ---------- */
article table {
    margin-top: 14px;
    border-collapse: collapse;
    color: #000;
}

table,
.table,
.table thead tr th,
.table tr td,
td,
th {
    border: 0pt #a7abb8 solid;
}

.table td.entry:last-child,
.table th.entry:last-child {
    border-right: 0px;
}

.table td.entry:first-child,
.table th.entry:first-child {
    border-left: 0px;
}

.table th.entry,
.table td.entry {
    border: 1px #a7abb8 solid;
    border-top: 0px;
}

article table caption {
    padding: 0;
    margin-top: 0;
    text-align: left;
}
span.table--title-label {
    display: none;
}

article table td,
article table th {
    padding: 8px;
    font-size: 14px;
    color: #313336;
    border: 1px solid #a7abb8;
    vertical-align: top;
    text-align: left;
}
article table th,
article table tr.sthead th {
    color: #000;
    font-weight: 500;
    border-bottom: 2px solid #a7abb8 !important;
}

/* ---------- Code ---------- */
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
    background-color: #edf0f7;
    color: #000;
    padding: 1px 3px;
    border-radius: 3px;
}
.filepath {
    font-family: monospace;
}
article pre {
    background-color: #edf0f7;
    padding: 10px;
    margin-top: 10px;
    overflow-x: auto;
    border-radius: 3px;
}

/* ---------- Related links ---------- */
nav.related-links {
    margin-top: 18px;
    font-size: 14px;
}
nav.related-links a {
    font-size: 14px;
}

nav.related-links ul.linklist {
    list-style-type: none;
    padding-left: 0;
}

/* ---------- Images ---------- */
article img {
    max-width: 100%;
    height: auto;
}
.p img:only-child {
    padding: 12px 0;
}

/* ---------- Footer (built by JS into main) ---------- */
.footer-copyright {
    text-align: center;
    padding: 10px 0 40px 0;
    margin-top: 20px;
    font-size: 12px;
    color: #61646b;
}

/* ---------- Search-term highlight (Highlight action / Phase C search) ---------- */
mark,
.mark,
.search_term {
    background: #fff3a3;
    padding: 0;
}
/* Toggled off by the toolbar Highlight action. */
body.sf-no-highlight mark,
body.sf-no-highlight .mark,
body.sf-no-highlight .search_term {
    background: transparent;
    color: inherit;
}

/* ===================================================================
   Responsive: below 1024px the sidebar shows from the left side of 
   the screen as a panel toggled by the header burger.
   =================================================================== */
@media (max-width: 1024px) {
    .app-burger {
        display: flex;
    }

    .sidebar-container {
        position: absolute;
        top: 60px; /* header height */
        left: 0;
        z-index: 20;
        flex: 0 0 auto;
        max-width: 90%;
        width: 400px;
        height: calc(100% - 60px);
        background: #fff;
        box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
        transform: translateX(-105%);
    }
    .sidebar-container.active {
        transform: translateX(0);
    }
    main[role="main"] {
        border-left: 0;
    }

    .search-result__preview {
        font-size: 14px;
        line-height: 1.4;
    }
}

@media (max-width: 992px) {
    .app-title {
        display: none;
    }

    .app-search .app-search__field {
        border-radius: 8px;
        padding: 0;
        font-size: 14px;
    }
}

/* Print-only date/time stamp (populated by spotfire-help.js on beforeprint);
   never shown on screen, revealed in the print block below. */
.print-datetime {
    display: none;
}

/* ===================================================================
   Print: strip the app chrome and print only the article.
   The Print toolbar action calls window.print(); with no print rules
   the browser reproduces the on-screen app shell — banner, search bar,
   sidebar, toolbar buttons — and the viewport-locked scroll containers
   (body/main) emit a scrollbar and clip long topics to one page.
   Here we hide the chrome and unlock those containers so the article
   flows naturally across pages. The copyright footer is kept.
   =================================================================== */
@media print {
    /* Hide the app chrome: banner (logo/title/search), sidebar TOC,
     content toolbar (Highlight/Print), breadcrumb trail, burger. */
    header[role="banner"],
    .sidebar-container,
    .section-toolbar,
    .app-breadcrumbs,
    .app-burger {
        display: none !important;
    }

    /* Release the fixed-viewport scroll containers so content is not
     clipped and no scrollbar is rendered; let the article paginate. */
    html,
    body {
        height: auto;
        overflow: visible;
        display: block;
    }

    #content {
        display: block;
        max-width: none;
        margin: 0;
    }

    main[role="main"] {
        height: auto;
        overflow: visible;
        border-left: 0;
        /* Headroom at the top so the fixed date/time stamp never overlaps the
       first lines of the article. */
        padding: 24px 0 0 0;
    }

    /* Date/time in the top-left of every printed page. position:fixed repeats
     the element on each page when printing. */
    .print-datetime {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        font-size: 13px;
        color: #000;
    }

    *,
    ::after,
    ::before {
        text-shadow: none !important;
        box-shadow: none !important;
    }

    thead {
        display: table-header-group;
    }

    img,
    tr {
        page-break-inside: avoid;
    }

    h2,
    h3,
    p {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    @page {
        size: a3;
    }

    body {
        min-width: 992px !important;
    }

    .badge {
        border: 1px solid #000;
    }

    .table {
        border-collapse: collapse !important;
    }

    .table td,
    .table th {
        background-color: #fff !important;
    }

    .table-bordered td,
    .table-bordered th {
        border: 1px solid #dee2e6 !important;
    }
}